Быстрое построение графика на JS

Появилась задача: из набора данных построить график. Желательно с возможностью масштабирования, изменения временного промежутка. Ну и желательно симпатичный. Быстро. Так как задача должна быть не уникальной, то решил поискать готовое решение. Основной критерий – возможность быстрого развёртывания, чтобы не вникать. Нашлось такое сразу – Flot (flotcharts.org) – именно о построении графиков с помощью него и поговорим ниже.

Сначала демо:



Датасет 1 Датасет 2 Датасет 3

Можно переключать датасеты и график автоматически перестроится. Также есть автоматическое масштабирование прокруткой колёсика мыши и перетаскивание по осям – то есть именно то, что нам и требуется. Развернуть можно через npm (как написано на гитхабе проекта), но есть способ и более подходящий, например, для виртуальных хостингов - это просто скачать и подключить скрипты. Чтобы не собирать отдельно скрипты каждый раз я залил их в архив – просто подключайте нужные для текущего проекта. Например, для даты/времени (оси X) - jquery.flot.time.js. Итак, подключение:

<script src="source/jquery.js"></script>
<script src="lib/jquery.event.drag.js"></script>
<script src="lib/jquery.mousewheel.js"></script>
<script src="source/jquery.canvaswrapper.js"></script>
<script src="source/jquery.colorhelpers.js"></script>
<script src="source/jquery.flot.js"></script>
<script src="source/jquery.flot.saturated.js"></script>
<script src="source/jquery.flot.browser.js"></script>
<script src="source/jquery.flot.drawSeries.js"></script>
<script src="source/jquery.flot.uiConstants.js"></script>
<script src="source/jquery.flot.navigate.js"></script>
<script src="source/jquery.flot.touchNavigate.js"></script>
<script src="source/jquery.flot.hover.js"></script>
<script src="source/jquery.flot.touch.js"></script>
<script src="source/jquery.flot.selection.js"></script>
<script src="source/jquery.flot.time.js"></script>

Верстка

	
<div id="placeholder" style="width:640px;height:320px;margin:auto"></div>	
<br /><br />
<select name="ss2" id="ss2" onchange="changeGr();" style="margin: auto;display: block;">
	<option value="0">Датасет 1</option>
	<option value="1">Датасет 2</option>
	<option value="2">Датасет 3</option>
</select> 	

Ну и скрипты. Вспомогательная функция получения случайных (ну хорошо - псевдослучайных, мой внимательный читатель) чисел в заданном диапазоне включительно:

function getRandomIntInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

Инициализация и заполнение датасетов этим самыми случайными числам:

var dataset = [];

for (var i = 0; i < 3; i++) {
	dataset[i] = [];
	
	for (var j = 0; j < 50; j++) {
		dataset[i].push([j, getRandomIntInt(1, 50*(i+1))]);
	}
}

Ну и самая важная функция - рисование графика (картинки) по заданному датасету.

function changeGr(){
	var datasetNumber = $("#ss2").val();
	var plot = $.plot("#placeholder", [dataset[datasetNumber]], {
		series: {
			lines: {
				show: true
			},
			points: {
				show: true
			}
		},
		grid: {
			hoverable: true,
			clickable: true
		},
		yaxis: {
			min: 0,
			max: 200
		},
		zoom: {
			interactive: true
		},
		pan: {
			interactive: true,
			enableTouch: true
		}
	});
}

Как видите, параметры понятны из перевода; полный их список можно найти на гитхабе проекта. Вот так можно буквально за пять минут создать симпатичный график на JS.