JavaScript библиотеки для создания графиков

Владимир | | Ajax, htaccess, HTML, JavaScript, PHP, Web разработка.

Сегодня я продолжу рассказ о создании и использовании графиков на web ресурсах.

В предыдущих статьях речь шла об использовании для этих целей flash библиотек (Графики своими руками – Open Flash Chart 2) и внешних сервисов (Графики от Google и PHP библиотеки для работы с ними).

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

Рассмотрим достоинства и недостатки этого варианта.

Достоинства.

1) Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика.

2) Минимальная нагрузка на сервер. Отрисовка графика выполняется браузером. Сервер должен только отправить массив с точками, по которым будет построен график.

3) Простота использования. Достигается за счет готовых библиотек.

Недостатки.

1) Возможны проблемы совместимости с некоторыми браузерами. С этими проблемами знакомы все web мастера. Но, должен отметить, что разработчики библиотек неплохо с ними справляются.

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

Теперь перейдем к практической части.

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

Библиотека называется Flot.

Для начала определимся с задачей.

Допустим, у нас есть PHP скрипт, который получает данные, которые нужно показать на графике. И HTML страница на которой мы должны разместить график.

Начнем с разметки страницы.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Тестирование библиотеки Flot</title>
    
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    
    <meta name="description" content="Использование библиотеки Flot" />
    <meta name="keywords" content="flot, javascript, график" />
</head>

<body>

<div id="my_graph" style="width:500px; height:300px">
</div><!-- end of my_graph -->

<p>
    Подробное описание этого примера в статье <a href=""></a>.
</p>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Как видите, это обычная страница, внутри которой находится блок div, предназначенный для размещения нашего графика (строки 18-19). В CSS стилях этого блока нужно обязательно указать его размеры (width, height).

Кроме того, в конце страницы мы подключили файлы библиотеки (строки 25-27).

Т.к. библиотека Flot (jquery.flot.js) является плагином к jQuery, то первой мы подключаем её. Третий файл (excanvas.js) нужен для поддержки IE6.

В строке 30 мы подключаем JavaScript файл (main.js), который будет получать данные от сервера и рисовать график.

Рассмотрим его подробнее.

$(function() {
    //получаем данные для графика (с помощью AJAX запроса)
    $.get(document.location.href + "datasrc.php", null, function(data) {
        //строим график
        var graphData = eval("(" + data + ")");
        $.plot($("#my_graph"), graphData, { yaxis: {max: 6, min: -6} });
    });
});

Как видите, тут все предельно просто.

1) Получаем данные (с помощью Ajax запроса).

2) Для передачи данных я выбрал JSON формат, т.к. он позволяют максимально упростить скрипты.

3) Строим график с помощью функции plot. В её первом параметре передаём id блока, в котором будет размещен график. Во втором – данные, полученные от серверного скрипта. В третьем – настройки графика (я указал только минимальное и максимальное значение по вертикальной оси).

Теперь переходим к сервреной части.

<?php

//Тут может быть код для получения данных из базы данных
//В этом примере мы создадим обычный массив с координатами точек

$points1 = array(
    array(0,1)
    , array(1,3)
    , array(2,-4)
    , array(3,2)
    , array(4,0.5)
    , array(5,0.7)
    , array(6,-1)
    , array(7,4)
    , array(8,2)
);

$points2 = array(
    array(0,-1)
    , array(1,-3)
    , array(2,4)
    , array(3,-2)
    , array(4,-0.5)
    , array(5,-0.7)
    , array(6,1)
    , array(7,-4)
    , array(8,-2)
);

//массив с настройками графика
$graph = array(
    array(
        'color'=>'rgb(255, 98, 0)'
        , 'data'=>$points1
        , 'label'=>'Линия 1'
    )
    , array(
        'color'=>'rgb(18, 143, 52)'
        , 'data'=>$points2
        , 'label'=>'Линия 2'
    )
);

echo json_encode($graph);

// end of datasrc.php

Этот скрипт просто создает массив с данными графика, преобразует в JSON формат и отправляет браузеру.

Обратите внимание на запись данных в массив. Массив $graph содержит 2 вложенных массива, каждый из которых в свою очередь содержит все данные, необходимые для создания одной линии на графике. Прежде всего, это координаты точек (элемент data), цвет линии (color), подпись (label).

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

Live Demo

Посмотреть, как выглядит этот график можно здесь.

Скачать

Кроме того, если есть желание поэкспериментировать вы можете скачать архив с примером.

В заключение приведу небольшой список JavaScript библиотек для создания графиков.

JS charts
jqplot
PlotKit
JavaScript Graph Builder
Rapha?l
jQuery Sparklines

Небольшое дополнение.

В несжатом варианте используемые здесь JavaScript библиотеки довольно объемные. Поэтому я упаковал их архиватором 7-zip и добавил в папку с этим примером .htaccess с таким содержимым.

<IfModule mod_rewrite.c>
	RewriteEngine On
	AddEncoding gzip .gz
	RewriteCond %{HTTP:Accept-encoding} gzip
	RewriteCond %{REQUEST_FILENAME}.gz -f
	RewriteRule ^(.*)$ $1.gz [QSA,L]
</IfModule>

Теперь посетителю будет отправляться заархивированный вариант библиотеки.

Подробнее почитать о принципе работы .htaccess можно в статье Увеличиваем скорость загрузки web страниц.

Как всегда, буду рад услышать ваше мнение в комментариях 😉