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

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

javascript_flot_graph

Сегодня я продолжу рассказ о создании и использовании графиков на 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 страниц.

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

  • Упустили еще одну библиотеку для этих целей.
    YUI

    А вообще, лучше тогда использовать что то вроде этого:
    OPC
    или этого:
    amCarts

    • Все библиотеки, которые вы перечислили используют flash. Об Open Flash Chart 2 я писал в предыдущей части.

      Я согласен, что с точки зрения возможностей они самые «навороченные», но в тоже время они довольно объемные.

      А JavaScript вариант позволяет сэкономить трафик.

  • Упустили еще одну библиотеку для этих целей.
    YUI

    А вообще, лучше тогда использовать что то вроде этого:
    OPC
    или этого:
    amCarts

    • Все библиотеки, которые вы перечислили используют flash. Об Open Flash Chart 2 я писал в предыдущей части.

      Я согласен, что с точки зрения возможностей они самые «навороченные», но в тоже время они довольно объемные.

      А JavaScript вариант позволяет сэкономить трафик.

  • Big_Shark

    По мне так все JS библиотеке не очень хороши.
    Единственное что понравилось это Raphaël.
    Но это не библиотека для создания графиков. Это просто обычная библиотека JS оснащена я хорошим функционалом для рисования.

    График должен быть удобным для изучения такой как этот http://raphaeljs.com/analytics.html а не обычной картинкой нарисованной в canvas на котором я не могу просмотреть детально каждый отрезок графика. Мне приходиться глазомером вычерчивать линии для того чтобы узнать до какой он все таки высоты там добрался.

    P.S. Легче на PHP рисовать с таким же успехом.

  • Big_Shark

    По мне так все JS библиотеке не очень хороши.
    Единственное что понравилось это Rapha?l.
    Но это не библиотека для создания графиков. Это просто обычная библиотека JS оснащена я хорошим функционалом для рисования.

    График должен быть удобным для изучения такой как этот http://raphaeljs.com/analytics.html а не обычной картинкой нарисованной в canvas на котором я не могу просмотреть детально каждый отрезок графика. Мне приходиться глазомером вычерчивать линии для того чтобы узнать до какой он все таки высоты там добрался.

    P.S. Легче на PHP рисовать с таким же успехом.

  • Как мне кажется, перед flash граффиками у js только одно достоинство — графики будут отображаться в браузерах, где не установлен flash плеер. Flash так же как и js библиотека загрузится один раз и сохранится в кэш браузера. Но как говорят выше, flash более удобен. Сначала мне показалось, что js — самый оптимальный вариант. Сейчас я меняю свое мнение…

  • Как мне кажется, перед flash граффиками у js только одно достоинство — графики будут отображаться в браузерах, где не установлен flash плеер. Flash так же как и js библиотека загрузится один раз и сохранится в кэш браузера. Но как говорят выше, flash более удобен. Сначала мне показалось, что js — самый оптимальный вариант. Сейчас я меняю свое мнение…

  • График должен быть удобным для изучения

    Я все-таки поспорю. Графики бывают разные. Для некоторых нужна возможность увеличивать фрагменты, для некоторых — нет.

    Например, нужно построить круговую диаграмму с 3-5 секторами. Вряд ли кто-то захочет её увеличивать, особенное если проценты будут рядышком подписаны.

    у js только одно достоинство

    Второе достоинство js — размер. Особенно актуально если нужен один график на странице и в качестве дополнения (а не основного контента).

  • График должен быть удобным для изучения

    Я все-таки поспорю. Графики бывают разные. Для некоторых нужна возможность увеличивать фрагменты, для некоторых — нет.

    Например, нужно построить круговую диаграмму с 3-5 секторами. Вряд ли кто-то захочет её увеличивать, особенное если проценты будут рядышком подписаны.

    у js только одно достоинство

    Второе достоинство js — размер. Особенно актуально если нужен один график на странице и в качестве дополнения (а не основного контента).

  • Интересная вещь, но нагрузка мне кажется, не оправдывает эффект.

    • Если на странице нужны графики, то их придется создавать и показывать.
      Что касается нагрузки. Создание пары графиков с помощью JS практически незаметно для пользователя. Тоже самое относится и к Flash.

      Если учесть, что график можно обновить, например, с помощью ajax запроса, то можно выиграть на скорости загрузки страницы.
      Например, если вам нужно чтобы пользователь мог перелистывать график (по дням или по месяцам).

      При большом количестве графиков нагрузка, конечно, возрастет, но вот на сколько я не знаю. Многое зависит от сложности самих графиков.

  • Интересная вещь, но нагрузка мне кажется, не оправдывает эффект.

    • Если на странице нужны графики, то их придется создавать и показывать.
      Что касается нагрузки. Создание пары графиков с помощью JS практически незаметно для пользователя. Тоже самое относится и к Flash.

      Если учесть, что график можно обновить, например, с помощью ajax запроса, то можно выиграть на скорости загрузки страницы.
      Например, если вам нужно чтобы пользователь мог перелистывать график (по дням или по месяцам).

      При большом количестве графиков нагрузка, конечно, возрастет, но вот на сколько я не знаю. Многое зависит от сложности самих графиков.

  • Валентина

    Добрый вечер!
    Нашла Вашу статью, очень она мне понравилась, но, в силу того, что изучаю я недавно javascript, немного непонятно, как либо куда нужно поставить библиотеки, чтобы строился график… И очень бы хотелось видеть весь код Вашей программы одним текстом. Большое спасибо.

    • В конце статьи ссылка на архив с примером. Там и файлы библиотек размещены правильно (все в одной папке 🙂 ) и весь код программы одним текстом 😉
      Если он у Вас не запустится, напишите, пожалуйста какие сообщения об ошибках Вы получили.

      • Марина

        Здравствуйте!
        У меня тоже не запустился 🙁
        Архив с примером и файлами библиотек скачала, на сервер положила.
        Никаких сообщений об ошибках. Просто пустая страница при вызове index.html, т.е. пустое место для графика, и ниже строка «Подробное описание этого примера там-то» со ссылкой.

        • Убедитесь, что все скрипты доступны, т.е. по адресам
          _http://ваш_сайт/jquery.js
          _http://ваш_сайт/jquery.flot.js
          _http://ваш_сайт/excanvas.js
          _http://ваш_сайт/main.js
          вы должны увидеть содержимое соответствующих файлов.

  • Валентина

    Добрый вечер!
    Нашла Вашу статью, очень она мне понравилась, но, в силу того, что изучаю я недавно javascript, немного непонятно, как либо куда нужно поставить библиотеки, чтобы строился график… И очень бы хотелось видеть весь код Вашей программы одним текстом. Большое спасибо.

    • В конце статьи ссылка на архив с примером. Там и файлы библиотек размещены правильно (все в одной папке 🙂 ) и весь код программы одним текстом 😉
      Если он у Вас не запустится, напишите, пожалуйста какие сообщения об ошибках Вы получили.

      • Марина

        Здравствуйте!
        У меня тоже не запустился 🙁
        Архив с примером и файлами библиотек скачала, на сервер положила.
        Никаких сообщений об ошибках. Просто пустая страница при вызове index.html, т.е. пустое место для графика, и ниже строка «Подробное описание этого примера там-то» со ссылкой.

        • Убедитесь, что все скрипты доступны, т.е. по адресам
          _http://ваш_сайт/jquery.js
          _http://ваш_сайт/jquery.flot.js
          _http://ваш_сайт/excanvas.js
          _http://ваш_сайт/main.js
          вы должны увидеть содержимое соответствующих файлов.

  • Плагин отказывается работать в ИЕ8.
    Есть какое нибудь решение?

    Заранее спасибо.

    • На оф. сайте есть обсуждение этой темы.
      Рекомендации простые — попробуйте использовать последнюю версию библиотеки из svn, но результат, как я понял, пока не гарантируется.

  • Плагин отказывается работать в ИЕ8.
    Есть какое нибудь решение?

    Заранее спасибо.

    • На оф. сайте есть обсуждение этой темы.
      Рекомендации простые — попробуйте использовать последнюю версию библиотеки из svn, но результат, как я понял, пока не гарантируется.

  • Presser

    не могу понять почему при открытии урла типа …/flot/ график строится, а при открытии …/flot/index.html не работает (
    скрипты вроде все доступны, я их уже по всех папках распихал

    • я их уже по всех папках распихал

      Это не правильно 🙂

      Проблема в строке 3 (второй листинг).
      document.location.href возвращает полный адрес страницы (тот, который вы видите в адресной строке браузера), т.е. когда вы заходите на …/flot/index.html запрос отправляется к
      …/flot/index.htmldatasrc.php
      Куда бы вы не «пихали» скрипт все равно запрос к нему не дойдет 🙂

      Варианты решения:
      1) проверять, есть ли в адресе index.html и вырезать его;
      2) передавать данные одним из методов, описанных в этой статье

      • Presser

        Удалил .htaccess и с третей строки «document.location.href + »
        main.js

        $(function() {
        $.get(document.location.href + "datasrc.php", null, function(data) {
        var graphData = eval("(" + data + ")");
        $.plot($("#my_graph"), graphData, { yaxis: {max: 6, min: -6} });
        });
        });

        работает )

        • Presser

          а черт вставил код main.js и забыл удалить лишнее
          $(function() {
          $.get("datasrc.php", null, function(data) {
          var graphData = eval("(" + data + ")");
          $.plot($("#my_graph"), graphData, { yaxis: {max: 6, min: -6} });
          });
          });

  • Presser

    не могу понять почему при открытии урла типа …/flot/ график строится, а при открытии …/flot/index.html не работает (
    скрипты вроде все доступны, я их уже по всех папках распихал

    • я их уже по всех папках распихал

      Это не правильно 🙂

      Проблема в строке 3 (второй листинг).
      document.location.href возвращает полный адрес страницы (тот, который вы видите в адресной строке браузера), т.е. когда вы заходите на …/flot/index.html запрос отправляется к
      …/flot/index.htmldatasrc.php
      Куда бы вы не «пихали» скрипт все равно запрос к нему не дойдет 🙂

      Варианты решения:
      1) проверять, есть ли в адресе index.html и вырезать его;
      2) передавать данные одним из методов, описанных в этой статье

      • Presser

        Удалил .htaccess и с третей строки «document.location.href + »
        main.js

        $(function() {
        $.get(document.location.href + "datasrc.php", null, function(data) {
        var graphData = eval("(" + data + ")");
        $.plot($("#my_graph"), graphData, { yaxis: {max: 6, min: -6} });
        });
        });

        работает )

        • Presser

          а черт вставил код main.js и забыл удалить лишнее
          $(function() {
          $.get("datasrc.php", null, function(data) {
          var graphData = eval("(" + data + ")");
          $.plot($("#my_graph"), graphData, { yaxis: {max: 6, min: -6} });
          });
          });

  • Здравствуйте!
    Хорошая статья, мне очень помогла!
    Но у меня проблема, если функция имеет разрыв, то при рисовании линией (его не видно), а если точками (то их надо очень много и браузер виснет)! Может подскажите, есть какая библиотека, чтобы учитывала разрывы функций, или в Flot может что подправить?
    Заранее спасибо!

    • Я боюсь, что для вашего случая (большое количество точек) не подойдет ни одна JS библиотека. Дело не в том, что они плохие, просто реализация JS в браузерах сама по себе очень ресурсоемкая. Например, многие простенькие JS игры могут спокойно потреблять 50% ресурсов процессора, при том, что их flash аналоги используют намного меньше.

      В общем, я бы попробовал использовать именно flash библиотеки для создания графиков. Например, Open Flash Chart или amCharts.

    • Посмотрите http://jsgadget.ru/jschart.html — если этому компоненту в массиве исходных данных в качестве значения по оси Y подсунуть null, то отобразится разрыв

  • Здравствуйте!
    Хорошая статья, мне очень помогла!
    Но у меня проблема, если функция имеет разрыв, то при рисовании линией (его не видно), а если точками (то их надо очень много и браузер виснет)! Может подскажите, есть какая библиотека, чтобы учитывала разрывы функций, или в Flot может что подправить?
    Заранее спасибо!

    • Я боюсь, что для вашего случая (большое количество точек) не подойдет ни одна JS библиотека. Дело не в том, что они плохие, просто реализация JS в браузерах сама по себе очень ресурсоемкая. Например, многие простенькие JS игры могут спокойно потреблять 50% ресурсов процессора, при том, что их flash аналоги используют намного меньше.

      В общем, я бы попробовал использовать именно flash библиотеки для создания графиков. Например, Open Flash Chart или amCharts.

  • Понятно, спасибо большое, будем пробовать!

  • Понятно, спасибо большое, будем пробовать!

  • Евгений

    Здравствуйте!
    Прочел статью, понравилась библиотека, решил поэкспериментировать, но наткнулся на проблему — не могу сделать так чтобы flot корректно работал во временном интервале. Нашел вот такой пример, но повторить у себя не получилось —

    $.plot($("#graph"),
    graphData, { xaxis: { mode: 'time'},
    });

    выводит время в формате %H:%M, но никак не дату как в примере. Помогите разобраться.

    • В каком формате вы передаете дату? Должен быть timestamp (в мс).

      • Евгений

        Именно в нем и передаю — вот в таком виде ответ: [{«color»:»rgb(255, 98, 0)»,»data»:[[1269291600,0]]}]

        • В примере, который вы привели, формат данных немного другой.
          var d = [[-373597200000, 315.71], [-370918800000, 317.45],…
          $.plot($(«#placeholder»), [d], { xaxis: { mode: «time» } });
          а настройка диапазона дат выполняется так
          $(«#nineties»).click(function () {
          $.plot($(«#placeholder»), [d], { xaxis: {
          mode: «time»,
          min: (new Date(«1990/01/01»)).getTime(),
          max: (new Date(«2000/01/01»)).getTime()
          } });
          });
          Попробуйте умножить время на 1000 (перевод в мс), и я не совсем понял, вы убрали часть данных из примера или передаёте только одну точку?

  • Евгений

    Здравствуйте!
    Прочел статью, понравилась библиотека, решил поэкспериментировать, но наткнулся на проблему — не могу сделать так чтобы flot корректно работал во временном интервале. Нашел вот такой пример, но повторить у себя не получилось —

    $.plot($("#graph"),
    graphData, { xaxis: { mode: 'time'},
    });

    выводит время в формате %H:%M, но никак не дату как в примере. Помогите разобраться.

    • В каком формате вы передаете дату? Должен быть timestamp (в мс).

      • Евгений

        Именно в нем и передаю — вот в таком виде ответ: [{«color»:»rgb(255, 98, 0)»,»data»:[[1269291600,0]]}]

        • В примере, который вы привели, формат данных немного другой.

          var d = [[-373597200000, 315.71], [-370918800000, 317.45],...
          $.plot($("#placeholder"), [d], { xaxis: { mode: "time" } });

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

          $("#nineties").click(function () {
              $.plot($("#placeholder"), [d], { xaxis: {
                  mode: "time",
                  min: (new Date("1990/01/01")).getTime(),
                  max: (new Date("2000/01/01")).getTime()
              } });
          });

          Попробуйте умножить время на 1000 (перевод в мс), и я не совсем понял, вы убрали часть данных из примера или передаёте только одну точку?

  • Евгений

    Спасибо Владимир — перевод в мс сработал!

    • Был рад помочь 😉 Если честно, я не был уверен, что проблема именно в этом.

  • Евгений

    Спасибо Владимир — перевод в мс сработал!

    • Был рад помочь 😉 Если честно, я не был уверен, что проблема именно в этом.

  • Ди

    Помогите 🙂 Предупреждаю, я не грамотный в вопросе, но стало дико интересно.

    Скачал архив, распаковал. Изменения в самих файлах (жирным):
    1.файл первый — main.js — удалил часть «document.location.href +», как писалось выше, плюс консоль ошибок в броузере просил удалить лишние кавычки в — var graphData = eval(«(» + data + «)»); — вот что получилось:
    ____________________________________________
    $(function() {
    //получаем данные для графика (с помощью AJAX запроса)
    $.get( «file:///I:/flot/datasrc.php«, null, function(data) {
    //строим график
    var graphData = eval(» data «);
    $.plot($(«#my_graph»), graphData, { yaxis: {max: 6, min: -6} });
    });
    });
    _________________________________

    2. Почему то мне показалось, что именно так надо подключать библиотеки (я про файл index.html):
    ____________________________________________
    <script type="text/javascript" src="file:///I:/flot/jquery.js»>
    <script type="text/javascript" src="file:///I:/flot/jquery.flot.js»>
    <!—[if IE]><script type="text/javascript" src="file:///I:/flot/excanvas.js»><![endif]—>
    <script type="text/javascript" src="file:///I:/flot/main.js»>
    ___________________________________________________

    3. Тот же консоль ошибок броузера просит закрыть конструкцию «<?php" в файле datasrc.php.

    В итоге в броузере рисуется только пустая сетка графика, а хочется график 🙂

    • Боюсь, вам не правильно показалось 🙂
      Когда вы подключаете js файлы, вы должны указывать их URL, а не размещение на сервере.
      Т.е. вместо
      file:///I:/flot/jquery.flot.js
      должно быть что-то вроде
      http://localhost/flot/jquery.flot.js

      Если консоль ошибок просит, то закрывайте 🙂 Но, вообще, если файл содержит php код, то это рекомендованная практика не ставить закрывающий тег. В этом случае исключается возможность случайно отправить какой-нибудь пробел до того как будут отправлены заголовки (headers).

  • Ди

    Помогите 🙂 Предупреждаю, я не грамотный в вопросе, но стало дико интересно.

    Скачал архив, распаковал. Изменения в самих файлах (жирным):
    1.файл первый — main.js — удалил часть «document.location.href +», как писалось выше, плюс консоль ошибок в броузере просил удалить лишние кавычки в — var graphData = eval(«(» + data + «)»); — вот что получилось:
    ____________________________________________
    $(function() {
    //получаем данные для графика (с помощью AJAX запроса)
    $.get( «file:///I:/flot/datasrc.php«, null, function(data) {
    //строим график
    var graphData = eval(» data «);
    $.plot($(«#my_graph»), graphData, { yaxis: {max: 6, min: -6} });
    });
    });
    _________________________________

    2. Почему то мне показалось, что именно так надо подключать библиотеки (я про файл index.html):
    ____________________________________________
    <script type="text/javascript" src="file:///I:/flot/jquery.js»>
    <script type="text/javascript" src="file:///I:/flot/jquery.flot.js»>
    <!—[if IE]><script type="text/javascript" src="file:///I:/flot/excanvas.js»><![endif]—>
    <script type="text/javascript" src="file:///I:/flot/main.js»>
    ___________________________________________________

    3. Тот же консоль ошибок броузера просит закрыть конструкцию «<?php" в файле datasrc.php.

    В итоге в броузере рисуется только пустая сетка графика, а хочется график 🙂

    • Боюсь, вам не правильно показалось 🙂
      Когда вы подключаете js файлы, вы должны указывать их URL, а не размещение на сервере.
      Т.е. вместо
      file:///I:/flot/jquery.flot.js
      должно быть что-то вроде
      http://localhost/flot/jquery.flot.js

      Если консоль ошибок просит, то закрывайте 🙂 Но, вообще, если файл содержит php код, то это рекомендованная практика не ставить закрывающий тег. В этом случае исключается возможность случайно отправить какой-нибудь пробел до того как будут отправлены заголовки (headers).

  • Ди

    Спасибо, уж извините за наглёж, может знаете, где можно почитать подробно о том, как настроить использование библиотек для совсем начинающих. Задавать вопросы здесь будет совсем не по формату блога (вопросы будут слишком простыми и глупыми). Поиски в сети пока не увенчались успехом. Имеются только описания библиотек, не более.

    • Понимаете, JavaScript библиотеки — это обычные js файлы, и подключаются они точно также. Т.е. их нужно разместить на сервере (в папке, доступной из браузера) и в теге script страницы указать их url.
      Иногда, если библиотека состоит из нескольких файлов, необходимо следить за структурой папок (эта структура должна быть описана в документации).

      Но, это общая теория. Если вы действительно хотите понимать что и как работает, то лучше всего прочесть книгу по JS. Например, Дэвида Флэнагана «JavaScript. Подробное руководство».

      • Ди

        Благодарю, разобрался. Все оказалось слишком просто. Невнимательность.

  • Ди

    Спасибо, уж извините за наглёж, может знаете, где можно почитать подробно о том, как настроить использование библиотек для совсем начинающих. Задавать вопросы здесь будет совсем не по формату блога (вопросы будут слишком простыми и глупыми). Поиски в сети пока не увенчались успехом. Имеются только описания библиотек, не более.

    • Понимаете, JavaScript библиотеки — это обычные js файлы, и подключаются они точно также. Т.е. их нужно разместить на сервере (в папке, доступной из браузера) и в теге script страницы указать их url.
      Иногда, если библиотека состоит из нескольких файлов, необходимо следить за структурой папок (эта структура должна быть описана в документации).

      Но, это общая теория. Если вы действительно хотите понимать что и как работает, то лучше всего прочесть книгу по JS. Например, Дэвида Флэнагана «JavaScript. Подробное руководство».

      • Ди

        Благодарю, разобрался. Все оказалось слишком просто. Невнимательность.

  • Dim

    Если правильно понимаю, функция «eval» во втором листинге используется для работы с группой данных, а какая функция должна быть, если у переменной всего одно значение, изменяющееся во времени? То есть нужно передать всего одно число.

  • Нет, eval используется для преобразования данных из формата json в
    объект JavaScript.
    Количество значений роли не играет.

  • Де

    Последний вопрос 🙂
    Листинг номер 3, есть один пхп-файл с двумя массивами данных. Нужно построить два графика по одному в разных блоках div. Подается, что нужно создавать два файла типа main, только с разными названиями графиков, но вот как в каждом из них передать адрес на нужный массив? И как нужно представить данные в пхп-файле, чтобы потом верно их передать?

  • Вариантов несколько.

    1) Использовать два разных php скрипта.
    В этом случае в файле main.js строки с 3 по 6 нужно повторить дважды, и при этом в строках
    $.get(document.location.href + …
    подставить адрес нужного php скрипта.

    2) Создавать оба массива внутри одного php скрипта, а с помощью js выбирать нужный. Но этот вариант мне нравится меньше, т.к. придется придумывать свою структуру данных и разбирать ее с помощью js.

  • Dim

    По первому варианту: это понятно 🙂
    По второму варианту: это очень сложно?

  • Нет, не сложно, просто дополнительная работа.

  • Magy

    Скажите, а возможно ли с помощью JavaScript создание графиков подобных этим:
    http://www.bifin.ru/informers
    http://www.conus.kiev.ua/stock.html

    • В принципе, да. Но готовые решения я видел только на flash.

      • Evgen

        Здравствуйте. Мне нужно строить графики с большим количеством точек (10-20 тыс. ). Стоит ли пытаться использовать JS библиотеки или тут однозначно flash? Просто очень не хочется грузить сервер задачами построения графиков, вот и пытаюсь вынести эту нагрузку на сторону клиента.

        • По большому счету, строить график из 10-20 тыс. точек не правильно, т.к. пользователь все равно их не увидит на мониторе (разрешение по горизонтали значительно меньше). Т.е. в идеале нужно разбивать точки на группы и считать среднее для каждой группы. И проблемы с производительностью сразу решаются, т.к. точек будет меньше тысячи.

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

          Я бы, наверное, ориентировался на flash. Можно попробовать JS, график построить вы сможете, только нужно проверять насколько он будет грузить процессор, и не забывать, что производительность JS зависит от браузера.

      • Magy

        Подскажите есть такая масштабируемая рисовалка графиков на HTML5?

        • Не видел. Можно попробовать что-нибудь сделать с помощью raphaeljs

  • Денис Катриченко

    А вы бы не могли подсказать как изменить шаг оси «y»  . Допустим ставлю я диапазон от -100 до 100. И скрипт разбивает по 25, а мне нужно к примеру по 20. Может есть дополнительный параметр позволяющий это делать ? Заранее благодарен   

    • Точно сказать не могу. Попробуйте использовать axisMargin в настройках grid или
      autoscaleMargin в настройках yaxis.

    • zetrider

      Долго искал решения на этот же вопрос, вообщем параметр: tickSize: 1 задает шаг 1, задаете его к xaxis или yaxis

  • Алёна

    Скажите пожалуйста, а можно ли каким либо образом сдвинуть ось ординат (вертикальную) в центр? чтобы положительные и отрицательные области разделялись в нуле?

    • Честно говоря, я давно не работал с Flot, поэтому всех нюансов не помню. Но есть два параметра, которые должны решить проблему
      xaxis {
      min: -10,
      max: 10
      }

      • Алёна

        попробовала-действительно появляется отрицательная ось, но я хочу, чтобы ось ординат была в центре и разделяла координатную плоскость на 4 четверти (ну как в тетрадке рисуем обычную ось)

        • Я понял. К сожалению, судя по примерам на оф. сайте, такой режим вывода оси не предусмотрен.

  • Николай Зуев

    напишите статью как работать с временем формата ,2014-04-01 10:17:53, и как обрабатывать данные с сервера, и как передавать через json данные с php

    • А в чем проблема? Функция date позволяет показать дату в любом формате.
      Пример передачи данных от сервера в JSON формате показан в этой статье
      echo json_encode($data);

      Напишите, что у Вас не получается.