Tarlyun blog

Для создания графиков на web-страницах обычно используется один из трех вариантов:

• Генерация картинки на стороне сервера (perl, php, java…)
• Генерация картинки прямо в браузере, используя flash-объект.
• Генерация картинки прямо в браузере, используя javascript.

О последнем способе мы и поговорим. Самой популярной js библиотекой на данный момент является jquery. Для jquery есть множество библиотек для визуализации данных, но одна из самых лучших — flot. Flot кроссбраузерная библиотека, позволяющая отрисовывать график на канве (canvas). Причем график можно изменять непосредственно на загруженной странице, без перезагрузки и дополнительных запросов к серверу. Но обо всем по порядку.

Для начала скачаем библиотеку Flot (в конце статьи можно найти все ссылки) . За основу для своих экспериментов возьмем второй пример — Different graph types и удалим все линии кроме d1 и d3. Помимо этого, добавим 2 поля для ввода данных и одну кнопку, по нажатию которой график будет перерисовываться:

$("#redraw").click(function (e) {
	e.preventDefault();
	re_plot();
});

Здесь мы отменяем событие по умолчанию, и вызываем свою функцию:

function re_plot() {
	var x = parseInt($("#x").val());
	var y = parseInt($("#y").val());
 
	var d1 = [];
	var d3 = [];
	for (var i = -7; i < 7; i += 0.5)
	{
		d1.push([i, x * Math.sin(i)]);
		d3.push([y + i, Math.cos(i)]);
	}
 
	$.plot($("#placeholder"), [
		{
			data: d1,
			lines: { show: true, fill: true }
		},
		{
			data: d3,
			points: { show: true }
		}
	]);
	return false;
}

Функция перерисовки графика очень проста: получаем значение полей для ввода и заполняем массивы новыми значениями. После чего, вызываем встроенную функцию библиотеки flot для отрисовки данных.

Пример 1: JQuery + Flot

Изменяя значения X и Y и нажимая кнопку reDRAW, мы будем изменять график. Каждый раз нажимать кнопку не хочется… Нужна динамика… Поэтому добавим два слайдера, перемещая ползунки которых, мы будем автоматически изменять график.

Для того чтобы на странице появился слайдер, нужно подключить библиотеку jquery UI, определить div, в котором будет слайдер:

x: <input id="x" type="text" value="1" readonly="readonly"> <div id="xslider"></div>

И задать начальную инициализацию в js:

	$("#xslider").slider({
	range: "min",
	value: 1,
	min: 1,
	max: 10,
	step: 1,
	slide: function (a, b) {
		$("#x").val(b.value);
		re_plot();
	}
});

Указанные параметры сделают слайдер с диапазоном от 1 до 10 и шагом ползунка равным 1 (параметры min, max, step). При перетаскивании — будет произведено закрашивание слева на право (range: «min») и вызвана анонимная функция (определённая в параметре slide). Эта функция изменит значение input c id = x на текущее значение слайдера. И вызовет уже знакомую нам функцию перерисовки графика. Аналогично инициализируется и второй слайдер.

Пример 2: JQuery + Flot

Пример слишком простой и далек от реальных задач. Поэтому, изучив документацию и формулы, создадим ипотечный график-калькулятор. Большинство кредитов делятся по типу выплат на аннуитеты (погашение кредитов происходит равными суммами, но вначале большую часть этой суммы составляет обслуживание процентов кредита) и на дифференцированные платежи (выплаты по кредиту осуществляют равными долями, а процентные платежи меняются от максимума в начале, до минимума — в конце). Более подробно с теорией можно ознакомиться по ссылкам в конце статьи.

Нам необходимо три слайдера:

• Стоимость жилья и первоначальный взнос (двойной слайдер);
• Срок кредита;
• Процентная ставка;

Также добавим нужное число текстовых полей для отображения расчетной информации. В функции re_plot() будем проводить перерасчет всех параметров и выводить 2 графика. Точки на графиках сделаем активными: при наведении указателя мыши будем показывать номер месяца и сумму платежа. Для того чтобы это сделать, необходимо:

• В опциях графика добавить:

  grid: { hoverable: true, clickable: true }

  grid: { hoverable: true, clickable: true }

• Определим функцию showTooltip, которая будет рисовать всплывающий div с данными.
• Назначить событие на DIV c графиком:

  $("#placeholder").bind("plothover", function());

  $("#placeholder").bind("plothover", function());

Пример 3: JQuery + Flot. Ипотечный калькулятор

PS. Полезные материалы:

Библиотеки и примеры их использования:

• Скачать Flot
• Примеры Flot
• Скачать JQueri UI
• Примеры slider

Немного теории:

• Ипотека
• Калькулятор выплат
• Типы выплат кредитов