2 569 Графики являются отличным визуальным представлением различных данных. Например, вы не сможете сделать по-настоящему профессиональную страницу администратора без использования графиков, кроме того они достаточно сложны в настройке.
Тем не менее существует достаточно много библиотек, облегчающих эту задачу, например, xCharts. Сегодня мы будем использовать эту библиотеку вместе с чтобы создать простое веб-приложение, в котором будет строится график с помощью AJAX, а данные для графика будут поступать из MySQL таблицы.
HTML
HTML каркас прост — в нем будут только элементы для инициализации графика и элемента управления (выбор даты). Для того, чтобы не тратить свое время на стили CSS и основные JS библиотеки, включаем в проект Bootstrap.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pretty Charts with jQuery and AJAX | Tutorialzine Demo</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 class="form-horizontal"> <fieldset> <div class="input-prepend"> <span class="add-on"><i class="icon-calendar"></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> |
Как вы уже заметили, мы включили в проект CSS файлы для xcharts, datepicker, bootstrap и style.css.
Перед закрытием тэга body, инициализируем JS библиотеки: jQuery, d3.js (нужна для xcharts), xcharts, (нужна для плагина date range), плагин date range и наш script.js. В следующем шаге покажем, как это все работает.
Таблица MySQL
Данные мы будем получать из MySQL таблицы, поэтому нужно создать ее структуру и наполнить данными. В архиве вы можете найти файл schema.sql, в котором находится запрос на создание этой таблицы.
Сама таблица выглядит следующим образом:
В таблице всего три поля. Поле даты является и уникальным индексом, что означает, что у нас не могут быть записи с одинаковыми датами. Поле sales_ord содержит количество продаж в день. Это все, что необходимо для нашего примера.
Примечание: Данные для подключения к базе данных хранятся в файле setup.php.
PHP
Теперь приступим к PHP. В нем будем выбирать записи из таблицы, которые будут соответствовать выбранному диапазону дат и выводить результат в формате JSON:
ajax.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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(); // Делаем запрос с помощью Idiorm $results = ORM::for_table('chart_sales') ->where_gte('date', $start) ->where_lte('date', $end) ->order_by_desc('date') ->find_array(); // Создаем массив данных foreach ($results as $key => $value) { $data[$key]['label'] = $value['date']; $data[$key]['value'] = $value['sales_order']; } echo json_encode($data); } |
В примере использована библиотека . Её преимущества в том, что она находится в одном файле (расположенным в папке lib/) и с ней очень просто работать.
Результат в JSON формате выглядит так:
|
1 2 3 4 5 6 7 8 9 10 |
[{ "label": "2013-01-07", "value": "4" }, { "label": "2013-01-06", "value": "65" }, { "label": "2013-01-05", "value": "96" }] |
В свойство label заносятся данные из полей дат, а в values – число продаж в день.
JavaScript
Наш JS код представлен в файле assets/js/script.js. Для того, чтобы понять, как он работает, мы разделили объяснение на куски.
В начале объявляем переменные и инициализируем . Стоит отметить, что этот плагин не является оригинальным. Это всего лишь его измененная копия, которая вместо работает с . В данной ситуации sugar.js предпочтительней, так как он более мощный и продвинутый по сравнению с устаревшим date.js, работающим с датами и временем.
assets/js/script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(function() { // Устанавливаем даты по умолчанию 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 очень прост.
Теперь создадим таблицу:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
// Добавляем подсказку var tt = $('<div class="ex-tooltip">').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) { // Конвертируем timestamp из // ajax.php в объект JavaScript Date return Date.create(x); }, tickFormatX : function(x) { // Форматируем текст для оси 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, для того, чтобы этот плагин отображал их корректно.
Добавляем функцию для загрузки данных через AJAX:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
function ajaxLoadChart(startDate,endDate) { // Если данных нет, очищаем таблицу if(!startDate || !endDate){ chart.setData({ "xScale" : "time", "yScale" : "linear", "main" : [{ className : ".stats", data : [] }] }); return; } // Запрос $.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 }] }); }); } }); |
С помощью метода setData устанавливаем параметры отображения для графика. Атрибут className очень важен. А важен он потому, что плагин использует его для идентификации вашей таблицы. Чтобы избежать возможных проблем, не забываете про этот атрибут.
Веб-приложение завершено.
