RGraph: HTML5 библиотека для построения графиков и диаграмм

Теперь, с появлением HTML5 и canvas, Flash становится всё менее и менее жизненно необходим.

Хочу познакомить вас с canvas-библиотекой для создания графиков и диаграмм, которые будут работать как в десктопных браузерах с поддержкой HTML5, так и на мобильных платформах. Библиотека называется RGraph.

RGraph - очень гибкая библиотека, и если нет надобности в использовании всех её функций одновременно, то вовсе не обязательно подключать все файлы. Например, для построения простого линейного графика достаточно подключить ядро библиотеки RGraph.common.core.js и RGraph.line.js.

Для того, чтобы добавить график или диаграмму на страничку требуется:

• Подключить ядро библиотеки и файлы, необходимые для реализации заданного функционала.
• Добавить в DOM документа элемент <canvas> с атрибутом id.
• После того, как <canvas> будет прорендерен, создать объект RGraph.<name_of_chart> и сконфигурировать его свойства.

Для примера будем считать, что у нас в DOM уже есть элемент

<canvas id="chart_id" width="310" height="140">
    [No canvas support]
</canvas>

и подключен RGraph.line.js.
Теперь создадим объект line:

var data = [10,4,17,50,25,19,20,25,30,29,30,29];
var line = new RGraph.Line("chart_id", data);

Первый параметр при объявлении RGraph.Line - это идентификатор нашего canvas-элемента, а второй - это данные, по которым будет построен график.
Теперь надо прописать конфигурационные свойства объекта line:

RGraph.SetConfig(line, {
     'chart.colors'          : ['#57a4ff'],
     'chart.filled'          : true,
     'chart.fillstyle'       : ['#57a4ff'],
     'chart.labels'          : ['0','1','2','3','4','5']
});

Я не буду объяснять, что каждое из свойств означает - всё это вы сможете прочитать в документации на официальном сайте.
Осталось только прорисовать график:

line.Draw();

Всё, теперь на странице появится симпатичный HTML5-график! Очистить его можно следующим образом:

RGraph.Clear(document.getElementById('line_chart_id'));

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

В заключении хочу сказать, что библиотека RGraph проста в освоении и достаточно функциональна, причём есть возможность строить красивые интерактивные графики. Недостатком, пожалуй, могу назвать только то, что бесплатно использовать RGraph можно только в некоммерческих проектах, в коммерческих же придётся заплатить £ 49,00, что не совсем дёшево.

Примеры различных диаграмм и графиков вы можете найти на официальном сайте.

P.S.: исходные коды примера, приведённого в статье, выкладывать не буду, поскольку он исключительно демонстрационный. Я просто покажу картинку того, что получилось бы.