Создание графиков с помощью jQuery и xCharts.

13-02-01 root JavaScript CSS, jQuery 4

Графики — незаменимый инструмент для представления данных. Библиотека xCharts, которую мы будем использовать, упрощает работу с графиками.

Мы будем использовать эту библиотеку вместе с daterange picker для популярного UI фреймворка Twitter Bootstrap для создания AJAX-графиков, отображающих данные из MySql.

HTML

Html структура страницы довольно простая.

Нам надо только подключить необходимые библиотеки для инициализации графиков.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Pretty Charts with jQuery and AJAX </title>
        <link href="assets/css/xcharts.min.css" rel="stylesheet">
        <link href="assets/css/style.css" rel="stylesheet">

        <!-- Include bootstrap css -->
        <link href="assets/css/daterangepicker.css" rel="stylesheet">
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet" />

    </head>
    <body>
        <div id="content">

            <form>
              <fieldset>
                <div>
                  <span><i></i></span>
                  <input type="text" name="range" id="range" />
                </div>
              </fieldset>
            </form>

            <div id="placeholder">
                <figure id="chart"></figure>
            </div>

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <!-- xcharts includes -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
        <script src="assets/js/xcharts.min.js"></script>

        <!-- The daterange picker bootstrap plugin -->
        <script src="assets/js/sugar.min.js"></script>
        <script src="assets/js/daterangepicker.js"></script>

        <!-- Our main script file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>

Мы подключаем много внешних файлов к странице. Внутри тега <head> мы подключаем необходимые для xcharts, datepicker, bootstrap CSS файлы.

Перед закрытием тега <body> происходит подключение jQuery, d3.js (необходим для xcharts), xcharts, библиотеку sugar.js (для date range плагина), date range plugin и наш script.js. Далее мы разберемся в том, как всё это работает вместе.

Таблица MySql

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

В таблице всего три поля. Поле date — уникальное, это означает, что в таблице нет записей с одинаковыми датами. Поле sales_order хранит количество продаж за день. Ваша база может быть совершенно другой, если ваш PHP код будет возвращать корректный JSON, то не будет никаких проблем.

PHP

Задача PHP кода — выбирать данные из базы, которые подходят под выбранный период и возвращать эти данные в виде JSON.

ajax.php:

header('Content-Type: application/json');

// настройки базы для ORM библиотеки
require_once('setup.php');

if (isset($_GET['start']) AND isset($_GET['end'])) {

    $start = $_GET['start'];
    $end = $_GET['end'];
    $data = array();

    // Выборка данных
    $results = ORM::for_table('chart_sales')
            ->where_gte('date', $start)
            ->where_lte('date', $end)
            ->order_by_desc('date')
            ->find_array();

    // Подготовка для конвертации в JSON
    foreach ($results as $key => $value) {
        $data[$key]['label'] = $value['date'];
        $data[$key]['value'] = $value['sales_order'];
    }

    echo json_encode($data);
}

Данный код выбирает записи из базы, у которых поле date находится между start и end, которые мы передаем.

JSON результат будет выглядеть примерно так:

[{
    "label": "2013-01-07",
    "value": "4"
}, {
    "label": "2013-01-06",
    "value": "65"
}, {
    "label": "2013-01-05",
    "value": "96"
}]

Поле label содержит значение поля date из MySQL таблицы, а поле value — количество продаж за день. Мы будем использовать этот JSON код для представления в формате понятном плагину xCharts.

JavaScript

Весь JavaScript код находится в файле assets/js/script.js. Код довольно длинный, поэтому мы рассмотрим только некоторые его части.

$(function() {

    // Устанавливаем даты, используя методы sugarjs
    var startDate   = Date.create().addDays(-6),    // 6 дней назад
        endDate     = Date.create();                // сегодня

    var range = $('#range');

    // Показываем даты в поле ввода
    range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' -
        ' + endDate.format('{MM}/{dd}/{yyyy}'));

    // Загрузка графика
    ajaxLoadChart(startDate,endDate);

    range.daterangepicker({

        startDate: startDate,
        endDate: endDate,

        ranges: {
            'Today': ['today', 'today'],
            'Yesterday': ['yesterday', 'yesterday'],
            'Last 7 Days': [Date.create().addDays(-6), 'today'],
            'Last 30 Days': [Date.create().addDays(-29), 'today']
            // Можно добавлять разные варианты
        }
    },function(start, end){

        ajaxLoadChart(start, end);

    });

Мы используем библиотеку sugar.js для управления датами. По-умолчанию на графике будут отображаться данные за последние 7 дней.

Теперь создадим сам график:

// Подсказки при наведении
var tt = $('<div>').appendTo('body'),
    topOffset = -32;

var data = {
    "xScale" : "time",
    "yScale" : "linear",
    "main" : [{
        className : ".stats",
        "data" : []
    }]
};

var opts = {
    paddingLeft : 50,
    paddingTop : 20,
    paddingRight : 10,
    axisPaddingLeft : 25,
    tickHintX: 9, // количество точек по горизонтали

    dataFormatX : function(x) {

        // Создание JavaScript объекта из даты, которую вернуд PHP

        return Date.create(x);
    },

    tickFormatX : function(x) {

        return x.format('{MM}/{dd}');
    },

    "mouseover": function (d, i) {
        var pos = $(this).offset();

        tt.text(d.x.format('{Month} {ord}') + ': ' + d.y).css({

            top: topOffset + pos.top,
            left: pos.left

        }).show();
    },

    "mouseout": function (x) {
        tt.hide();
    }
};

// Создаем инстанс xChart и передаем данные для графика, тип и объект с настройками
var chart = new xChart('line-dotted', data, '#chart' , opts);

Прежде всего мы формируем объект, содержащий настройки и колбэки для xCharts. В свойстве dataFormatX из строки вида yyyy-mm-dd формируются JavaScript Date объекты, которые плагин будет корректно отображать и производить с ними необходимые вычисления.

Так же мы обрабатываем события mouseover/mouseout для отображения подсказок.

И наконец, JavaScript функция, которая загружает данные с помощью AJAX:

   // Функция для загрузки данных через AJAX и передачи их в график
    function ajaxLoadChart(startDate,endDate) {

        // Если данные не пришли (очистить график)

        if(!startDate || !endDate){
            chart.setData({
                "xScale" : "time",
                "yScale" : "linear",
                "main" : [{
                    className : ".stats",
                    data : []
                }]
            });

            return;
        }

        // иначе выполним AJAX запрос

        $.getJSON('ajax.php', {

            start:  startDate.format('{yyyy}-{MM}-{dd}'),
            end:    endDate.format('{yyyy}-{MM}-{dd}')

        }, function(data) {

            var set = [];
            $.each(data, function() {
                set.push({
                    x : this.label,
                    y : parseInt(this.value, 10)
                });
            });

            chart.setData({
                "xScale" : "time",
                "yScale" : "linear",
                "main" : [{
                    className : ".stats",
                    data : set
                }]
            });

        });
    }
});

xCharts содержит метод setData, с помощью которого можно легко обновить отображаемую информацию. Наш график готов!

Смотрите также

4 Комментария

владислав says:

22.08.2013 в 9:41 дп

демо не работает =( проверил и в опере и в хроме

Ответить
1. root says:
  
  22.08.2013 в 3:24 пп
  
  Здравствуйте!
  Демо работает, просто отключена рандомная генерация данных. Если выбрать период 01/01/2013 — 02/01/2013 (январь — февраль), то вы увидите график!
  
  Ответить
Игорь says:

05.10.2013 в 8:54 пп

Здравствуйте!
Жаль, что нет возможности фильтровать данные. Если бы таблица имела ещё одно поле, например, `name` , неплохо было бы ещё выводить данные для конкретного пользователя — WHERE name=`Sasha`. Или это возможно?

Ответить
Igor says:

22.12.2015 в 2:45 пп

А как можно все это дело установить на Joomla?

Ответить

ezcode