2602[1]

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

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

Тем не менее существует достаточно много библиотек, облегчающих эту задачу, например, xCharts. Сегодня мы будем использовать эту библиотеку вместе с daterange picker для Twitter Bootstrap чтобы создать простое веб-приложение, в котором будет строится график с помощью AJAX, а данные для графика будут поступать из MySQL таблицы.

Пример Скачать (.zip, 48 Кб)

HTML

HTML каркас прост — в нем будут только элементы для инициализации графика и элемента управления (выбор даты). Для того, чтобы не тратить свое время на стили CSS и основные JS библиотеки, включаем в проект Bootstrap.

index.php

Как вы уже заметили, мы включили в проект CSS файлы для xcharts, datepicker, bootstrap и style.css.

Перед закрытием тэга body, инициализируем JS библиотеки: jQuery, d3.js (нужна для xcharts), xcharts, sugar.js (нужна для плагина date range), плагин date range и наш script.js. В следующем шаге покажем, как это все работает.

Таблица MySQL

Данные мы будем получать из MySQL таблицы, поэтому нужно создать ее структуру и наполнить данными. В архиве вы можете найти файл schema.sql, в котором находится запрос на создание этой таблицы.

Сама таблица выглядит следующим образом:
Схема базы данных

В таблице всего три поля. Поле даты является и уникальным индексом, что означает, что у нас не могут быть записи с одинаковыми датами. Поле sales_ord содержит количество продаж в день. Это все, что необходимо для нашего примера.

Примечание: Данные для подключения к базе данных хранятся в файле setup.php.

PHP

Теперь приступим к PHP. В нем будем выбирать записи из таблицы, которые будут соответствовать выбранному диапазону дат и выводить результат в формате JSON:

ajax.php

В примере использована библиотека Idiorm. Её преимущества в том, что она находится в одном файле (расположенным в папке lib/) и с ней очень просто работать.

Результат в JSON формате выглядит так:

В свойство label заносятся данные из полей дат, а в values – число продаж в день.

Красивые графики на jQuery и AJAX

JavaScript

Наш JS код представлен в файле assets/js/script.js. Для того, чтобы понять, как он работает, мы разделили объяснение на куски.

В начале объявляем переменные и инициализируем плагин date range picker. Стоит отметить, что этот плагин не является оригинальным. Это всего лишь его измененная копия, которая вместо date.js работает с sugar.js. В данной ситуации sugar.js предпочтительней, так как он более мощный и продвинутый по сравнению с устаревшим date.js, работающим с датами и временем.

assets/js/script.js

Как вы можете видеть, в работе sugar.js очень прост.

Теперь создадим таблицу:

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

Handling Date Ranges

Добавляем функцию для загрузки данных через AJAX:

С помощью метода setData устанавливаем параметры отображения для графика. Атрибут className очень важен. А важен он потому, что плагин использует его для идентификации вашей таблицы. Чтобы избежать возможных проблем, не забываете про этот атрибут.

Веб-приложение завершено.


Оставить комментарий