CC BY
68
Библиотека Flot. Научная и деловая графика на Javascript
А.А. Марков,
д.т.н., профессор кафедры информационных систем МГУП имени Ивана Федорова,
Смирнова М.Е.,
ст. преподаватель кафедры информационных систем МГУП имени Ивана Федорова
Основанная на свободно-распространяемой библиотеке jQuery, библиотека Flot позволяет добавлять к WEB-прило-жениям качественные, профессионально оформленные 2d графики, иллюстрирующие деловые и научные данные. Библиотека Flot характеризуется простотой применения и широкими возможностями вариации в оформлении графической информации. В статье рассматривается применение библиотеки Flot на примере задачи визуализации статистических данных.
Традиционно библиотеки научной и деловой графики используются для визуализации деловой информации и других изучаемых данных, представленных в табличной форме. Графическое представление позволяет визульно оценить характер изучаемых процессов, сопоставить различные варианты их реализации, выявить значимые различия в поведении данных. Имеется множество различных методов графического представления табличных данных.
В библиотеке Flot [1] рассматривается представление информации в виде кривых, ломаных и ступенчатых линий, гистограмм, диаграмм рассеивания, сегментов1. Графики допускают различные варианты оформления. Во многих случаях для построения графика с использованием Flot подготовительные действия в программе сводятся к записи данных в требуемом формате. Если требуется изменить оформление графика, необходимо установить дополнительные атрибуты данных.
1 Другие типы графических данных рассматриваются в статье [4].
Рассмотрим использование Flot применительно к задаче визуализации статистических данных. Опишем основные шаги в построении программы.
Подключение библиотеки. Библиотеку Flot2 можно разместить в той же папке, что и html-страницу, созданную для демонстрации примера. Код HTML страницы, с подключением требуемых библиотек, представлен на листинге ниже. Для удобства описания строки кода пронумерованы.
Листинг 1. — Подключение библиотеки Numeric
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>Flot Examples</title>
5 <!C[if Ite IE 8]><script type="text/javascript" src="fIot/excanvas.min.js"> </script> <![endif]C>
6 <script type="text/javascript" src="fIot/jquery.js"> </script>
7 <script type="text/javascript" src="fIot/jquery.fIot.js"></script>
8 <script type="text/javascript" src="fIotEx.js"></script>
9 </head>
10 <body>
11 <div id="pIacehoIder" style="width:600px;height:300px;"></div>
12 </body>
13 </htmI>
Подключение библиотеки выполняется стандартным способом (строка 6, лист. 1). Код программы разместим во внешнем файле flotEx.js, размещаемом в той же папке, что и html-страница примера (строка 7). В строке 6 листинга выполняется подключение библиотеки jQuery. Для совместимости с браузерами Internet Explorer версии ниже 8-й подключается набор функций, представленных в файле excanvas.min.js.
Для вывода результата работы используется блок «div» (строка 11). Идентификатор id блока можно задать произвольно. Если в программе предполагается использовать несколько графиков, то для их представления необходимо записать соответствующее число блоков div.
2 Библиотеку Flot можно загрузить с сайта разработчика (http:// www.flot.com). Все требуемые библиотеки (в том числе jQuery, а также описание использования) включены в дистрибутив.
Формат для визуализации данных средствами Flot. Данные для построения графиков библиотекой Flot записываются в массиве Javascript, в виде пар координат [x, y]. Например, массив [[1,13.5],[2,6.8], [3,-4.1]] задает набор данных из трех точек. Первая точка имеет значение x, равное 1, а значение y, равное 13.5 и т. д. Массивы данных можно задавать прямой инициализацией (как в приведенном примере) или получать иными способами по ходу вычислений.
На одном графике можно отобразить несколько наборов данных. Способы визуального представления могут выбираться для каждого набора самостоятельно.
Постановка задачи. Рассмотрим применение библиотеки Flot для визуализации данных простого вычислительного эксперимента, подсчитывающего число попаданий экспоненциально-распределенной псевдослучайной величины в равнодлинные интервалы числовой оси. Для графического представления создадим наборы данных для плотности теоретического распределения
[exp (-x),x> 0,
a(x) = { (1)
v ' |0,x<0, (l)
а также набор данных для частот попадания псевдослучайной, распределенной в соответствии с (1), величиной, полученной программными методами. Длину интервала значений для измерения числа попаданий зададим равной 0.2. Будем строить графики для диапазона случайных чисел, лежащих в диапазоне [0.5].
Для указанных наборов данных покажем различные способы из представления с помощью библиотеки Flot.
Основные шаги решения задачи. Покажем последовательность действий, которые необходимо выполнить для построения графиков в нашей задаче.
1. Оценка интервалов представляемых значений.
2. Подготовка наборов данных.
3. Выбор типов графиков для представления данных.
Для демонстрации способов использования Flot приведем примеры и покажем применение функций и данных этой библиотеки.
Шаг 1. Оценка интервалов представляемых значений. Для оценки интервалов представляемых значений смысл оценить вид функции распределения (1). Следующий фрагмент кода показывает подготовку набора данных и вызов функции рисования графика с использованием Flot.
Листинг 2. — Построение графика плотности теоретического
1 var D=[];
2 for(var x=0;x<=5;x+=0.2){
3 D[D.length]=[x,Math.exp(-x)];
4 }
5 $.plot($("#placeholder"), [
6 {
7 data: D
8 }]
9 );
распределения
В этом примере точки функции (1) вычисляются в цикле (строки 2-4), затем сохраняются в массиве D, в требуемом для Flot формате (строка 3). Аргумент функциии изменяется от 0 до 5. В этом диапазоне лежат более 99,3% всех случайных величин, распределенных в соответствии с (1). Шаг изменения значений аргумента выбран равным 0.2.
Для построения графика применяется, реализуемая в jQuery функция plot (строки 5-9). Первым аргументом функции является JavaScript объект div, c идентификатором «placeholder». Вторым параметром — объект, определяющий данные графика.
Функция plot() автоматически масштабирует график, выбирает цвет графиков, строит сетку и размечает оси абсцисс и ординат (рис. 1).
12 1.0
0.К
0.6
0.4
02
0.0 о
Шаг 2. Подготовка наборов данных. В нашей задаче требуется построить набор данных для частот попадания в заданные интервалы псевдослучайной величины, распределенной в соответствии с (1).
\
\
\
Щ___
.0 0.5 1.0 1.5 2.0 2.5 3.0 3 J 4.0 4.5
Рис. 1. График функции (1)
Разобьем интервал [0,5] числовой оси на 10 равновеликих подинтервалов. Для первого подинтервала зададим диапазон значений (0,0.5], для второго - (0.5,1] и т. д.
Для генерации псевдослучайных чисел используем функцию Javascript Math.random(). Частоты попадания сгенерированных значений в подинтервалы будем сохранять в массиве FREQ. Код показывающий подготовку данных приводится ниже.
Листинг 3. — Вычисление частот попадания генерируемых значений в заданные инттервалы
1 var FREQ=[];
2 var N=10000;
3 var r;
4 var k;
5 for(var j=0;j<10;j++){
6 FREQ[j]=0;
7 }
8 for(var i=0;i<N;i++){
9 r=Math.random()
10 while(r==0){
11 r=Math.random();
12 }
13 r=-Math.log(r);
14 k=9;
15 for(var j=0;j<10;j++){
16 if(k==9) if(r <= (0.5*(j+1))) k=j;
17 }
18 FREQ[k] ++;
19 }
Поясним некоторые строки этого фрагмента программы. Во 2-й строке устанавливается число генерируемых случайных чисел. В строках 5-6 инициализируется массив FREQ, в строках 8-19 подсчитываются частоты попадания в подинтервалы. Для генерации псевдослучайного числа, распределенного экспоненциально используется код (строки 1013). В строках 10-12 выбирается не равное нулю случайное число из диа-
пазона [0,1], в строке 10 вычисляется с использованием метода обратных преобразований случайное число, распределенное экспоненциально. В строках 14-17 вычисляется номер подинтервала (k), а в строке 18 увеличивается на 1 число попаданий в подинтервал k. Дополнительный набор данных (CUMM_FREQ) создадим для хранения (а далее графического представления) накопленных частот попадания, т. е.
CUM _FREQ = £ FREQ-,, Vi (2)
J=0
Ниже показан код, формирующий значения CUMM_FREQ.
Листинг 4. — Вычисление накопленных частот
1 CUMM_FREQ[0]=FREQ[0]/N;
2 for(var j=1;j<10;j++){
3 CUMM_FREQ[j]=FREQ[j]/N+CUMM_FREQ[j-1];
4 }
5 for(var j=0;j<10;j++){
6 CUMM_FREQ[j]=[j*0.5,CUMM_FREQ[j]];
7 }
Строки 1-4 фрагмента кода формируют накопленные частоты по формуле (2).
Далее необходимо привести наборы данных к типу, требуемому библиотекой Flot.
Листинг 5. — Формирование наборов данных в формате Flot
1 for(var j = 0; j < 10; j++){
2 FREQ[j] = [ j*0.5, FREQ[j]/N ];
3 CUMM_FREQ[j] = [ j*0.5, CUMM_FREQ[j] ];
4 }
На листинге 5 каждый элемент наборов данных преобразуется к формату [«абсцисса», «ордината»]. В строках 2-3 листинга элементы привоятся к требуемому виду, и к каждому элементу добавляется значение аргумента, при котором вычислено значение соответствующей величины. Так в строке 3 показывается, что элемент CUMM_FREQ[j] является массивом, первый элемент которого равен j*0.5 и задает начало того интервала, для которого была вычислена накопленная частота (2).
Шаг 3. Выбор типов графиков для представления данных. Для представления статистических данных в графическом виде существуют принятые типы изображения, такие как функции, гистограммы,
диаграммы рассеивания и др. Покажем возможности библиотеки Flot, по представлению графических данных. Листинг 6 показывает функцию $.plot(), в применении к построению графиков (рис. 2).
Листинг 6. — Функция $.plot()
1 $.plot($("#placeholder"), [
2 {
3 data: D,
4 label:"f(x)=exp(-x)",
5 points:{show:true},
6 lines: { show: true, fill: false }
7 },
8 {
9 data: FREQ,
10 label:"Относительные частоты",
11 bars: { show: true,
12 barWidth:0.5
13 },
14 },
15 {
16 data: CUMM_FREQ,
17 label:"Накопленные относительные частоты",
18 lines: { show: true, steps: true }
19 }
20 ],
21 {
22 legend:{position:"nw"}
23 });
24 ]);
Общий формат функции $.plot() следующий
$.plot(placeholder, d, options)
Первый параметр функции задает блок div, предназначенный для отображения графиков, второй параметр описывает наборы данных, третий параметр (можно не указывать) задает общие опции для графиков.
Наборы данных на листинге 6 представлены в строках 2-7, 8-14, 15-19. Опции графиков заданы в строках 21-23. В силу ограниченности объема статьи не представляется возможным полностью описать возможности вариации способов представления данных, по этой причине упомянем только использованные в примере свойства объектов графиков, определяющие данные и опции:
а) для набора данных D (строки 2-7) приведены свойства, задающие текст легенды (legend), а также свойства, уточняющие вид линии (lines; свойство fill: false позволяет не заливать цветом область, выделенную линиями функции и осью абсцисс3). Для этого набора данных установлено свойство points. Значение true показывает, что на графике будут показаны точки, соответствующие значениям набора данных. По умолчанию эти точки отмечаются кружками, но их вид можно изменить. Если задать свойство show объекта lines равным false, то линии показаны не будут, останутся только точки (диаграмма рассеивания);
б) для набора данных FREQ (строки 8-14)выбран тип представления bars (строка 11). Этот тип используется в Flot для построения столбиковых диаграмм. Для нашего примера столбиковая диаграмма отображает гистограмму полученного распределения. Свойство barWidth объекта bars задает ширину прямоугольников для представления данных;
в) для отображения набора данных CUMM_FREQ (строки 1519) выберем ступенчатую линию. Такой способ представления графика задается свойством steps объекта lines (строка 18).
Общие свойства графиков для рисования функцией plot задаются параметром options. Для нашего примера (строки 21-23) необходимо сместить легенду в левый верхний угол холста. Другие возможности опций позволят устанавливать различные общие параметры графиков.
Построенные графики представлены ниже на рис. 2.
Выводы. В статье перечислено лишь небольшое число возможностей библиотеки Flot. Показано, что в простых случаях использование библиотеки практически не требует усилий от программиста (пример построения графика (рис. 1). Для общих случаев характерными являются гибкость, широкие возможности по визуальному представлению данных, формирование профессионально выполненных графиков для визуализации научных и деловых данных. К расширенным возмож-
3 Действует по умолчанию.
Рис. 2. Графическое представление наборов данных
ностям библиотеки следует отнести ее приспособленность для применения к построению интерактивных графиков. Реализация в jQuery позволяет легко использовать данные, представленные в формате JSON, а также упрощает работу с внешними данными по технологии AJAX, в том числе для построения мобильных приложений [2]. Flot предоставляет программисту доступ к графическому контексту холста, используемому Flot для рисования графиков. Последнее позволяет программисту дополнять отображение наборов данных другими графическими объектами с использованием технологий HTML 5 [3][4].
Библиографический№ список
1. Сайт разработчика библиотеки Flot: http://www.flot.com
2. MаркoвA.A. Разработка WEB-приложений для iPhone/iPod Touch. Часть I. Работа с данными : учеб. пособие / A.A. Mаркoв. - M. : Mryn, 2009. - 106 с.
3. MаркoвA.A. Разработка WEB-приложений для iPhone/iPod Touch. Часть II. Компьютерная графика для WEB : учеб. пособие / A.A. Mаркoв, M.E. Смирнова. - M. : Mryn, 2009. - 184 с.
4. Смирнова M.E. Библиотека бизнес-графики для систем автопубликации печатных изданий / M.E. Смирнова // Вестник Mryn.-2010. - № 11. - С. 217-224.
