Графики с использованием jQuery плагина Flot

Как только появляется большое количество данных, сразу возникает необходимость их упорядочить и проанализировать. Для этих целей можно использовать разные представления информации, но мне больше всего нравятся графики, т.к. по ним проще всего понять динамику возникновения события и спрогнозировать дальнейшее его поведение.

Постановка задачи

Необходимо построить график на основе исходных данных. Для удобства анализа информации нужно продумать возможность совмещения графиков по различным показателям и просмотр значений в определённых точках.

В итоге хотелось бы получить нечто, напоминающее графики в сервисе Google Analytics (они мне очень нравятся)

Поиск решения

Компоненты, к которым планируется прикрутить статистику, написаны с использованием API Bitrix’а и работают на сайтах под управлением битрикса. Логично было предположить, что столь популярная задача уже была продумана разработчиками и имеет свой API.

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

Веб аналитика Битрикс: график посещаемости сайта по часам.

Веб аналитика Битрикс: график посещаемости сайта по часам.

Но, к сожалению, битрикс умеет строить графики только в панели управления. Да и они не отличаются интерактивностью, т.к. пользователь видит готовую картинку и не может что-либо на ней выделить. К тому же, если пользователь захочет подкорректировать входные данные, то картинку придётся генерировать заново. Это не самый быстрый подход.

Т.к. средствами битрикса задачу не решить, следует найти какой-либо плагин, который предоставляет требуемый функционал. Чтобы графики были достаточно интерактивными плагин должен быть написан на JavaScript. При этом желательно чтобы он работал с использованием jQuery, т.к. этот фреймворк уже используется на сайте и радует своей простотой и логичностью.

После анализа всех решений остаётся только два варианта – использовать API графиков от Google (ссылка) и разобраться в jQuery плагине Flot (ссылка).

Если сравнить код для вывода гугловых графиков и код вывода графиков Flot, то выбор падёт в сторону Flot, т.к. его код прост и понятен.

Выбор конфигурации графика

Для начала нужно ознакомиться с тем что умеет делать выбраный плагин на основе простых примеров. Для моих целей подходят следующие возможности:

  • Выделение точек на графике и просмотр значений в этих точках(посмотреть)
  • Выделение отрезков графика для детального простотра (посмотреть)
  • Обновление графиков с использованием Ajax (посмотреть)

Способ ввода начальных данных

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

Форма выбора значений для вывода на графике

Форма выбора значений для вывода на графике

При нажатии на кнопку «Искать» данные с формы передаются через Ajax к скрипту, который возвращает нам данные в виде JSON, в формате, необходимом плагину. После получения данных плагин отрисовывает график.

Если пользователь изменит данные, график отрисуется заново, но страница не перезагрузится. На все эти действия уходит не больше секунды, поэтому интерфейс получается очень отзывчивым.

Вывод информации на графике

Плагин выведет столько кривых, сколько мы ему передадим в объекте с данными. Можно вывести только одну кривую. Вот пример статистики в моём компоненте записи на reception:

График заведения записей в компонете записи на Reception

График заведения записей в компонете записей на Reception

Можно вывести несколько кривых.

График заведения и выполнения записей в компонете записи на Reception

График заведения и выполнения записей в компонете записи на 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 комментария

Dzantiev

недавно написал подобный плагин, графики строятся на 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

Я сейчас не на работе, не могу проверить всё это на локальной копии сайта.

Ответить

Алексей

Максим спасибо за быстрый ответ. К сожалению в приведенных Вами примерах столбцы либо одного цвета, либо совмещаются вместе. Передо мной стоит же задача отобразить на графике по оси х месяцы, при этом столбцов для одного месяца может быть много и самое главное они должны отображаться отдельно друг от друга. Нет ли какого либо способа с помощью которого можно получить доступ к отдельно взятому столбцу?! В этом случае можно было бы их перебрать в цикле и «раскрасить» в нужные цвета.

Ответить

Морозов Максим

Когда вы отправляете скрипту данные для отображения они выглядят вот так:


[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
{ label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ]

Т.е. полосок может быть несколько. И для каждой из них может быть свой цвет.


[ { label: "Foo",color:"red", data: [ [10, 1], [17, -14], [30, 5] ] },
{ label: "Bar",color:"green" data: [ [11, 13], [19, 11], [30, -7] ] } ]

Я пока, что не на работе, не могу скинуть код рабочего примера.

Ответить

xela.nimed@googlemail.com

Да, полосок можно создать сколько угодно. Имею сейчас следущее:
https://lh6.googleusercontent.com/-NeSzq4n8QiQ/Tnr8oFUvt0I/AAAAAAAAAPw/X97X49wn97Q/s800/flot.PNG
Но повторюсь, столбцы нужны по отдельности как в вашем первом скрине.

Ответить

Морозов Максим

Ок. Понял.

Попроуйте вот этот плагин http://www.bd-fil.com/flot/

Ответить

xela.nimed@googlemail.com

Максим, огромное спасибо!
Это то, чего не хватает в официальном плагине.
Проблема решена.
P.S.: и чего его не добавят к официальному?!

Ответить

Морозов Максим

Понятно почему не добавят — чтобы не раздувать размер основной библиотеки. Так даже удобнее — можно подключить только то что нужно.

Ответить

xela.nimed@googlemail.com

Согласен. Но подключить то нечего. Имеется ввиду, что на офф.сайте нет этого. А так получается плагин к плагину =)

Ответить

Морозов Максим

Он там есть в списке плагинов =)

pups

В примере построения графика используется date.utc() не могли бы вы пояснить принцып его построения просто при использовании кода по аналогии на графике отображается только время без дат. Заранее спасибо.

Ответить

Морозов Максим

В данном примере задан формат времени в переменной timeformat, можно опустить этот параметр или задать таким какой нужен.

Ответить

pups

Добрый вечер подскажите пожалуйста. Как сделать, чтоб при масштабировании мышкой дата изменялась в соответствии с масштабом (год — по месяцам, месяц по дням, день часы и минуты и т.д.) что бы не наползали друг на друга. Или где то это в настройках нужно сделать. С Уважением.

Ответить

Морозов Максим

Хм. Я с такой задачей не сталкивался =) Можно попробовать обновить код графика и поискать похожие примеры здесь https://github.com/flot/flot/wiki/Flot-Usage

Ответить

pups

а в смысле обновить плот… как это сделать подскажите пожалуйста, и еще вопрос не знаете ли Вы как сделать правильно отображение не графике я запрашиваю из базы данные (дата время) и мне их нужно разнести во времени например (21.09.13 00:00:01 и 21.09.13 10:00:01) а то у меня получается так что точки рисуются одна под другой( и нет горизонтального разноса.. С Уважением.

Ответить

Морозов Максим

Обновить — значит скачать последнюю версию библиотеки (вдруг используется старая).

Формат отображения даты вы настраиваете в конфиге (в данном случае это plot_conf). За отображение времени отвечают свойства с именем timeformat. У меня там настроен формат вывода по дням. Потому время не учитывается.

Вот что написано в документации по поводу формата даты:

Here «timeformat» is a format string to use. You might use it like
this:

xaxis: {
mode: «time»
timeformat: «%y/%m/%d»
}

This will result in tick labels like «2000/12/24». The following
specifiers are supported

%h: hours
%H: hours (left-padded with a zero)
%M: minutes (left-padded with a zero)
%S: seconds (left-padded with a zero)
%d: day of month (1-31), use %0d for zero-padding
%m: month (1-12), use %0m for zero-padding
%y: year (four digits)
%b: month name (customizable)
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24
%P: AM/PM (uppercase version of %p)

Ответить

pups

спасибо большое время вроде стало адекватно отображаться а не могли бы Вы подсказать или посоветовать какую версию и где можно и нужно скачать для данных операций. С Уважением.

Ответить

Морозов Максим

тут речь идёт не о версии, а о плагине для плагина =) Я бы поискал подходящий пример здесь https://github.com/flot/flot/wiki/Flot-Usage

Ответить

pups

jquery.min.map — вы случайно не знаете что это такое и как с этим работать куда и как подключить..

Ответить

Морозов Максим

Это название плагина?

Ответить

pups

то что это название я понял только вот для скачивания есть 2 версии 1.10 и 2.03 а у меня jquery-1.9.1.. где найти под него и можно ли где-либо скачать (background.png, line.gif, fhbg.gif и т.п.) иконки.-артинки..

Ответить

Морозов Максим

Я с этим плагином не работал, подсказать не могу =)

Ответить

pups

извините пожалуйста за назойливость и возможно глупые вопросы но подскажите пожалуйста возможно я ошибся в указании настроек:
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} };
С Уважением.

Ответить

pupok

Добрый день а подскажите пожалуйста как задать название оси У.

Ответить

Морозов Максим

В документации я не нашел такой возможности. Можно вывести только легенду для линий.

Видимо, подразумевается что пользователям и так всё понятно =)

Ответить

рустам

https://github.com/xuanluo/flot-axislabels

Ответить

pupok

добрый день. извините пожалуйста а не могли б Вы подсказать почему при выводе на график точек происходит следующее:
при таких параметрах
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.

Ответить

des

Оу как. Собственно не понимаю зачем вы настройки компонент выложили. В исходняках и то больше инфы. Вот вы говорите что используете несколько примеров. А нельзя ли поподробней как вы получаете Ajax`ом и дальше что то делаете. Сам недавно в вебкодинге, не могу решить вопрос — как заставить другие функции работать с функцией плот, после того как я json`ом туда заливаю данные.

Ответить

Морозов Максим

Подразумевается что при использовании этого плагина вы уже сумели получить данные для отображения.

Пример массива данных я уже приводил выше:

[ { label: «Линия 1″,color:»red», data: [ [10, 1], [17, -14], [30, 5] ] },
{ label: «Линия 2″,color:»green» data: [ [11, 13], [19, 11], [30, -7] ] } ]

Этот массив данных пригодится при вызове функции, которая создаёт график:

$.plot(«тег в котором будет график», «массив данных», «конфигурация»);

Ответить

Fox

а как сделать чтобы был фиксированный шаг по оси x, например, и задавались только координаты y?

Ответить

Ваш отзыв

logo