- → Программирование
- → JavaScript
- → Уроки
JQuery + xCharts графики: создайте красивые графики для вашего приложения
Графики являются отличным наглядным пособием при предоставлении данных. Без них невозможно создать качественную админ-панель. Их не так легко установить. Однако, существует новая библиотека, которая облегчает эту задачу - xCharts. Сегодня мы собираемся использовать эту программу вместе с палитрой Date Range для Twitter Bootstrap, чтобы создать красивый AJAX-график для вашего веб-приложения, который извлекает данные из таблицы MySQL.
HTML
Демо-структура этого языка довольно проста - мы должны добавить элементы на странице для начала построения графика и для выбора информации. Поскольку в любом случае мы включаем загрузку на странице, можно использовать ее стилевые формы и значки, чтобы придать этой структуре хороший вид.
index.php
<!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">
<!-- подключаем 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 подключения -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
<script src="assets/js/xcharts.min.js"></script>
<!-- daterange picker bootstrap плагин -->
<script src="assets/js/sugar.min.js"></script>
<script src="assets/js/daterangepicker.js"></script>
<!-- наш главный файл скрипта -->
<script src="assets/js/script.js"></script>
</body>
</html>
Здесь используется немало внешних ресурсов. В основной секции у нас есть файлы таблицы каскадных стилей для xCharts , сортировщик чисел, загрузка (интегрированная из супер быстрого CDN CloudFlare) , и наш файл style.css.
Перед тем, как закрыть ярлык таблицы, у нас есть библиотека JQuery , d3.js (требуемые программой xсharts ), xcharts , библиотека с удобным интерфейсом sugar.js (которая требует плагин в диапазоне «дат» ), плагин в диапазоне «дат» и файл script.js. Далее вы увидите, как все это работает сообща.
MySQL
Как я уже упоминал во введении, скрипт, которым мы пишем, будет получать данные из таблицы MySQL и отображать их в диаграмме. Вы можете найти код SQL , который создаст таблицу в schema.sql в сжатом файле, доступном для загрузки с помощью верхних кнопок. Таблица будет выглядеть следующим образом:
Она имеет только три колонки. Колонке «дата» присваивается уникальный индекс, что означает, что не может быть повторяющихся записей в один и тот же день. В колонку «записей о продажах» указывается количество продаж в течение дня. Ваша база данных будет, безусловно, другой, но, пока вы получите правильный ответ в формат для структурирования данных в простой текстовый формат, используемый для обмена информацией JSON из PHP-скрипта, уже не будет никаких проблем (подробнее об этом в следующем разделе) .
Примечание: Не забудьте ввести свои данные подключения MySQL в setup.php . Затем вы должны будете создать новую базу данных MySQL и импортировать schema.sql из системы PHPMyAdmin или из выбранной вами системы управления.
PHP
В нашем скрипте PHP мы выберем записи из таблицы, которые соответствуют переданной начальной и конечной информации, соберем все данные массив, и выведем их в текстовом формате обмена данными (JSON):
ajax.php
header('Content-Type: application/json');
// настройка библиотеки
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();
// создаем новый массив с данными
foreach ($results as $key => $value) {
$data[$key]['label'] = $value['date'];
$data[$key]['value'] = $value['sales_order'];
}
echo json_encode($data);
}
Здесь я использую мою любимую библиотеку - Idiorm. Раньше я использовал ее в консультациях на сайте (и во многих личных проектах). Это только один файл (находится в библиотека/папки ) и весьма облегчает работу с базами данных. Все, что я делаю, это выбираю все результаты из базы данных, которые имеют временное значение между начальной и конечной метками времени, согласованными с запросом о получении информации.
Полученный ответ от JSON выглядит примерно так:
[{
"label": "2013-01-07",
"value": "4"
}, {
"label": "2013-01-06",
"value": "65"
}, {
"label": "2013-01-05",
"value": "96"
}]
Свойства ярлыка содержат значения чисел MySQL в соответствующей строке, а столбцы - количество продаж за этот день. Это зависит только от кода JavaScript, чтобы правильно обрабатывать эти данные и переделать их в формат, подходящий для совместного использования с плагином xCharts .
JavaScript
Весь код JS заключается в assets/js/script.js. Код немного длинный, и, чтобы сделать легче его выполнение, я представлю его вам частями.
Сначала мы установим несколько переменных и инициализируем date range picker плагин. Обратите внимание, что диапазон dat, который я использовал, - это ответвление от первоначального плагина. Я решил работать с этой версией, поскольку оригинал зависит от date.js – библиотеки с устаревшей данными, которая конфликтует с xCharts. Вместо нее используется sugar.js – прекрасная полезная библиотека с достоверной и современной информацией.
assets/js/script.js
$(function() {
// установка стандартных дат, используя функции shugar
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']
// You can add more entries here
}
},function(start, end){
ajaxLoadChart(start, end);
});
Как вы можете видеть, мы удачно применили информацию и методы sugar.js ", чтобы определить начальную и конечную точку диапазона. Я ввел в сценарий результаты последних 7 дней, и обновил поле ввода диапазона.
Теперь давайте создадим график:
// подсказка когда наводишь на график
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, // How many ticks to show horizontally
dataFormatX : function(x) {
// здесь конвертируется временной штамп пришедший с
// 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);
Сначала я определяю объект конфигурации xСharts с его свойствами и обратными функциями. В собственности dataFormatX я трансформирую yyyy-mm-dd строки, возращенные из запроса AJAX , в надлежащие объекты 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 предоставляет метод установки данных (the setData), так что вы можете легко переместить или заменить отображенные данные. Атрибут the className важен, так как его использует плагин для определения вашего графика. Если вы проигнорируете его, могут случиться всевозможные виды странных ошибок (поверьте мне, я знаю).
На этом мы завершили создание нашей красивой диаграммы!
Конец!
Вы можете использовать этот пример, чтобы улучшить ваши области управления и визуализировать статистические данные в красивом интерфейсе.
Источник материала ...
Дальше: Progressive Web App – от А до Я: что это? Как создать прогрессивное веб приложение?
Development — Taras Moroz