Гистограммы и не только

8 сентября 2015 Антон Кулешов 1551 0

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.

Реклама

Morris – это легковесная библиотека, при этом обладающая немалым функционалом для работы с графиками при помощи JavaScript. Но, чтобы ей воспользоваться, потребуется дополнительно подключить jQuery и Raphael. Вторая необходима для упрощения работы с векторной графикой в вебе (SVG и VML).

Пожалуй, для примера напишем самое простое представление данных, чтобы разобраться переходим на страницу демо.

Вначале подключаем скрипты и стили:

<link href="morris.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="morris.min.js" type="text/javascript"></script>

Теперь добавим HTML разметку:

<div id="graph"></div>

Переходим к построению графика в виде гистограммы:

$(function(){

	Morris.Bar({
		element: "graph",
		data: [
			{
				x: "2015 Чуть-чуть",
				y: 0
			},
			{
				x: "2015 Еще чуть-чуть",
				y: 1
			},
			{
				x: "2015 О, уже больше!",
				y: 2
			},
			{
				x: "2015 Давай-давай-давай!",
				y: 3
			},
			{
				x: "2016 Поперло!",
				y: 4
			},
			{
				x: "2016 Поперло!",
				y: 5
			},
			{
				x: "2016 Полным ходом!",
				y: 6
			},
			{
				x: "2016 Ух поперло!",
				y: 10
			},
			{
				x: "2016 Яяяяяяяяяяяяяяяяязь!",
				y: 18
			}
		],
		xkey: "x",
		ykeys: ["y"],
		labels: ["Y"],
		barColors: function(row, series, type){

			if(type === "bar"){

				return "rgb(0, " + Math.ceil(255 * row.y / this.ymax) + ", 0)";
			}else{

				return "#000";
			};
		},
		hoverCallback: function(index, options, content, row){

			return "Y: " + row.y + "<br />" + "X: " + row.x;
		}
	});
});

С первого взгляда может показаться, что пользоваться morris сложно, но это не так. Всё заключается в вызове метода bar() с переданными в него настройками графика гистограммы. Есть также возможность создавать и классические графики, но возвращаемся к нашему примеру. В element передаем имя id, в котором будет наш график. Далее идёт data, куда передаётся массив объектов с данными, которые будут отображены в нашем случае по осям x и y. В xkey указывается строка, содержащая имя атрибута, в которой указываются x метки. А ykeys и labels списки их значений. Это основные параметры, без которых график не будет построен.

Теперь перейдем к двум оставшимся методам barColors() и hoverCallback(), при помощи которых можем указать изменение цвета наших столбцов, а также сформировать их подписи, для более детального и визуально приятного восприятия данных. Мне же хотелось ещё добавить, что у библиотеки morris есть ещё масса методов и свойств, которые могут вам пригодиться – ссылка на скрипт. Там же находится более подробная документация и, возможно, решения под ваши конкретные задачи.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Улучшенная подсветка кода от prism

11 февраля 2015 Антон Кулешов

Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.

Simple SEO for WordPress

15 мая 2016 Антон Кулешов

Как изменить title у заметки WordPress? – Вопрос весьма актуальный. WordPress не включает в свой стандартный функционал возможности изменения title страниц, а также нет ни каких вариантов для добавления мета тегов description и keywords, которые необходимы для настройки SEO. Хотя эту проблему можно решить при помощи Yoast SEO или All in One SEO - одних из самых популярных плагинов в данной области, однако, из-за обилия настроек и сторонней рекламы, я решил написать свой простенький вариант к примеру для блога.

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 Антон Кулешов

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.