Как только появляется большое количество данных, сразу возникает необходимость их упорядочить и проанализировать. Для этих целей можно использовать разные представления информации, но мне больше всего нравятся графики, т.к. по ним проще всего понять динамику возникновения события и спрогнозировать дальнейшее его поведение.
Постановка задачи
Необходимо построить график на основе исходных данных. Для удобства анализа информации нужно продумать возможность совмещения графиков по различным показателям и просмотр значений в определённых точках.
В итоге хотелось бы получить нечто, напоминающее графики в сервисе Google Analytics (они мне очень нравятся)
Поиск решения
Компоненты, к которым планируется прикрутить статистику, написаны с использованием API Bitrix’а и работают на сайтах под управлением битрикса. Логично было предположить, что столь популярная задача уже была продумана разработчиками и имеет свой API.
К тому же, на эту мысль подталкивает наличие в битриксе модуля аналитики, который умеет чертить графики различного типа.
Но, к сожалению, битрикс умеет строить графики только в панели управления. Да и они не отличаются интерактивностью, т.к. пользователь видит готовую картинку и не может что-либо на ней выделить. К тому же, если пользователь захочет подкорректировать входные данные, то картинку придётся генерировать заново. Это не самый быстрый подход.
Т.к. средствами битрикса задачу не решить, следует найти какой-либо плагин, который предоставляет требуемый функционал. Чтобы графики были достаточно интерактивными плагин должен быть написан на JavaScript. При этом желательно чтобы он работал с использованием jQuery, т.к. этот фреймворк уже используется на сайте и радует своей простотой и логичностью.
После анализа всех решений остаётся только два варианта – использовать API графиков от Google (ссылка) и разобраться в jQuery плагине Flot (ссылка).
Если сравнить код для вывода гугловых графиков и код вывода графиков Flot, то выбор падёт в сторону Flot, т.к. его код прост и понятен.
Выбор конфигурации графика
Для начала нужно ознакомиться с тем что умеет делать выбраный плагин на основе простых примеров. Для моих целей подходят следующие возможности:
- Выделение точек на графике и просмотр значений в этих точках(посмотреть)
- Выделение отрезков графика для детального простотра (посмотреть)
- Обновление графиков с использованием Ajax (посмотреть)
Способ ввода начальных данных
В данном компоненте я не вижу смысла мудрить с хитрыми и не стандартными элементами управления. Для определения того, что будет отображаться на графике подойдёт обычная форма с парой полей для ввода временного промежутка и чекбоксами для определённых значений.
При нажатии на кнопку «Искать» данные с формы передаются через Ajax к скрипту, который возвращает нам данные в виде JSON, в формате, необходимом плагину. После получения данных плагин отрисовывает график.
Если пользователь изменит данные, график отрисуется заново, но страница не перезагрузится. На все эти действия уходит не больше секунды, поэтому интерфейс получается очень отзывчивым.
Вывод информации на графике
Плагин выведет столько кривых, сколько мы ему передадим в объекте с данными. Можно вывести только одну кривую. Вот пример статистики в моём компоненте записи на reception:
Можно вывести несколько кривых.
На осях координат можно выводить что угодно. Например, вот этот же плагин для графиков в моём компоненте заявок с веб форм выводит по оси абсцисс среднее время обработки заявки, а по оси ординат дату.
Использование плагина в Internet Explorer
Для отрисовки графиков Flot использует Canvas. Этот факт заставляет прибегать к ухищрениям, т.к. IE версии ниже 9ой не может их отобразить. Для решения этой проблемы в условном комментарии следует подключить библиотеку ExplorerCanvas (скачать), тогда всё будет хорошо =)
Как использовать плагин?
Выкладывать полный код компонента я не вижу смысла, слишком уж большой объём не нужной информации. Здесь я приведу только пример настроек графика, которые я использовал.
//формат даты
var timeFormat = "%d.%m.%y";
// свойства графика
var plot_conf = {
series: {
lines: {
show: true,
lineWidth: 2
},
points: {
show: true
}
},
selection: {mode: "x"},
xaxis: {
mode: "time",
timeformat: timeFormat
},
legend:{
show: true,
noColumns: 6,
container: $("#legend")
},
grid: {
backgroundColor:{
colors: ["#fff", "#eee"]
},
hoverable: true,
clickable: true
}
};
//свойства навигации
var over_conf = {
series: {
lines: {
show: true,
lineWidth: 1
},
shadowSize: 0
},
xaxis: {
ticks: [],
mode: "time",
timeformat: timeFormat
},
yaxis: {
ticks: [],
min: 0,
autoscaleMargin: 0.1
},
selection: {
mode: "x"
},
legend:{
show: false
},
grid: {
backgroundColor:{
colors: ["#fff", "#eee"]
}
}
}
С тем как вывести график легко разобраться посмотрев в код примеров (посмотреть). Если что-либо непонятно, то всё описано в довольно подробном API (читать)
К сожалению компоненты, показанные на картинках, доступны только для пользователей нашей организации, поэтому ссылку на них я дать не могу. Но если у кого-то есть вопросы по работе плагина, я постараюсь ответить
32 комментария
недавно написал подобный плагин, графики строятся на HTML5 если кому то интересно вот ссылка graph.prootime.ru
Ответить
Здравствуйте.
Хорошая статья, мало информации по этой библиотеке в «рунете».
Вопрос: в приведенном Вами изображении (bitirix-analytics.png) сесия, события и посетители изображены отдельными столбцами. Возможно ли сделать такое же с помощью этого плагина?!
P.S.: спасибо за статью.
Ответить
Вероятно, вам подойдёт код вот этого примера http://people.iola.dk/olau/flot/examples/annotating.html.
Можно попробовать изобразить как здесь — http://people.iola.dk/olau/flot/examples/stacking.html
Я сейчас не на работе, не могу проверить всё это на локальной копии сайта.
Ответить
Максим спасибо за быстрый ответ. К сожалению в приведенных Вами примерах столбцы либо одного цвета, либо совмещаются вместе. Передо мной стоит же задача отобразить на графике по оси х месяцы, при этом столбцов для одного месяца может быть много и самое главное они должны отображаться отдельно друг от друга. Нет ли какого либо способа с помощью которого можно получить доступ к отдельно взятому столбцу?! В этом случае можно было бы их перебрать в цикле и «раскрасить» в нужные цвета.
Ответить
Когда вы отправляете скрипту данные для отображения они выглядят вот так:
Т.е. полосок может быть несколько. И для каждой из них может быть свой цвет.
Я пока, что не на работе, не могу скинуть код рабочего примера.
Ответить
Да, полосок можно создать сколько угодно. Имею сейчас следущее:
https://lh6.googleusercontent.com/-NeSzq4n8QiQ/Tnr8oFUvt0I/AAAAAAAAAPw/X97X49wn97Q/s800/flot.PNG
Но повторюсь, столбцы нужны по отдельности как в вашем первом скрине.
Ответить
Ок. Понял.
Попроуйте вот этот плагин http://www.bd-fil.com/flot/
Ответить
Максим, огромное спасибо!
Это то, чего не хватает в официальном плагине.
Проблема решена.
P.S.: и чего его не добавят к официальному?!
Ответить
Понятно почему не добавят — чтобы не раздувать размер основной библиотеки. Так даже удобнее — можно подключить только то что нужно.
Ответить
Согласен. Но подключить то нечего. Имеется ввиду, что на офф.сайте нет этого. А так получается плагин к плагину =)
Ответить
Он там есть в списке плагинов =)
В примере построения графика используется date.utc() не могли бы вы пояснить принцып его построения просто при использовании кода по аналогии на графике отображается только время без дат. Заранее спасибо.
Ответить
В данном примере задан формат времени в переменной timeformat, можно опустить этот параметр или задать таким какой нужен.
Ответить
Добрый вечер подскажите пожалуйста. Как сделать, чтоб при масштабировании мышкой дата изменялась в соответствии с масштабом (год — по месяцам, месяц по дням, день часы и минуты и т.д.) что бы не наползали друг на друга. Или где то это в настройках нужно сделать. С Уважением.
Ответить
Хм. Я с такой задачей не сталкивался =) Можно попробовать обновить код графика и поискать похожие примеры здесь https://github.com/flot/flot/wiki/Flot-Usage
Ответить
а в смысле обновить плот… как это сделать подскажите пожалуйста, и еще вопрос не знаете ли Вы как сделать правильно отображение не графике я запрашиваю из базы данные (дата время) и мне их нужно разнести во времени например (21.09.13 00:00:01 и 21.09.13 10:00:01) а то у меня получается так что точки рисуются одна под другой( и нет горизонтального разноса.. С Уважением.
Ответить
Обновить — значит скачать последнюю версию библиотеки (вдруг используется старая).
Формат отображения даты вы настраиваете в конфиге (в данном случае это plot_conf). За отображение времени отвечают свойства с именем timeformat. У меня там настроен формат вывода по дням. Потому время не учитывается.
Вот что написано в документации по поводу формата даты:
Ответить
спасибо большое время вроде стало адекватно отображаться а не могли бы Вы подсказать или посоветовать какую версию и где можно и нужно скачать для данных операций. С Уважением.
Ответить
тут речь идёт не о версии, а о плагине для плагина =) Я бы поискал подходящий пример здесь https://github.com/flot/flot/wiki/Flot-Usage
Ответить
jquery.min.map — вы случайно не знаете что это такое и как с этим работать куда и как подключить..
Ответить
Это название плагина?
Ответить
то что это название я понял только вот для скачивания есть 2 версии 1.10 и 2.03 а у меня jquery-1.9.1.. где найти под него и можно ли где-либо скачать (background.png, line.gif, fhbg.gif и т.п.) иконки.-артинки..
Ответить
Я с этим плагином не работал, подсказать не могу =)
Ответить
извините пожалуйста за назойливость и возможно глупые вопросы но подскажите пожалуйста возможно я ошибся в указании настроек:
var plot_conf = {
series:{
points:{radius: 3,show: true},
lines:{show: true,fill: false},
shadowSize: 0 },
grid:{hoverable: true,
clickable: true,
markings: weekendAreas },
xaxis:{zoomRange: «time»,
panRange: «time»,
mode: «time»,
timeformat: » %d/%m/%y %H %M %S»,
minTickSize:[1,»second»],
monthNames:[«янв»,»фев»,»мар»,»апр»,»май»,»июн»,»июл»,
«авг»,»сен»,»окт»,»ноя»,»дек»] },
zoom:{interactive: true},
pan:{interactive: true} };
С Уважением.
Ответить
Добрый день а подскажите пожалуйста как задать название оси У.
Ответить
В документации я не нашел такой возможности. Можно вывести только легенду для линий.
Видимо, подразумевается что пользователям и так всё понятно =)
Ответить
https://github.com/xuanluo/flot-axislabels
Ответить
добрый день. извините пожалуйста а не могли б Вы подсказать почему при выводе на график точек происходит следующее:
при таких параметрах
xaxis:
{
zoomRange: «time»,
panRange: «time»,
mode: «time»,
timeformat: » %d %m %Y»,
// minTickSize:[1,»day»]
}
на графике при запросе из базы например в один день на графике отображается точка и дата которую запросили (т.е. правильно), но если задать интервал например два дня то на графике отображается все верно а даты под осью Х стоят как попало.
если
xaxis:
{
zoomRange: «time»,
panRange: «time»,
mode: «time»,
timeformat: » %d %m %Y»,
minTickSize:[1,»day»]
}
то при вызове одного дня, даты нет вообще, а при групповом выводе (два дня и более) даты подписываются в соответствии с графиком.
Не могли бы Вы помочь, как это исправить, что нужно сделать. ( для визуального просмотра могу отправить скрины выводов на график если конечно можно вашу почту и вам это нужно )))).
С Уважением, заранее спасибо.
Ответить
Доброго дня!!! может кто подскажет почему может не работать событие plotclick? Когда в то же время на том же примере работает событие plothover.
Ответить
Оу как. Собственно не понимаю зачем вы настройки компонент выложили. В исходняках и то больше инфы. Вот вы говорите что используете несколько примеров. А нельзя ли поподробней как вы получаете Ajax`ом и дальше что то делаете. Сам недавно в вебкодинге, не могу решить вопрос — как заставить другие функции работать с функцией плот, после того как я json`ом туда заливаю данные.
Ответить
Подразумевается что при использовании этого плагина вы уже сумели получить данные для отображения.
Пример массива данных я уже приводил выше:
Этот массив данных пригодится при вызове функции, которая создаёт график:
Ответить
а как сделать чтобы был фиксированный шаг по оси x, например, и задавались только координаты y?
Ответить