Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Как сделать красивый график для вашего сайта с помощью jQuery и xCharts.

Урок есть и в видеоформате! Смотреть?

А вы бывали в Египте? Видели пирамиды? Я не был, но они мне очень нравятся. Упорядоченная структура каменных блоков, сужающаяся к вершине, при том что в ряд их стоит 3, невольно напоминает график или диаграмму, не так ли? Сегодня я бы хотел рассказать вам дорогие друзья о том, как сделать притягивающий взгляды график, или диаграмму, если вам так больше нравится.


    Диаграммы являются прекрасным инструментом для наглядного представления данных. Какая современная панель администратора обходится без них? Думаете, что реализовать их трудно? Не, не сегодня. У вас есть более важные дела, чем создание диаграмм вручную, поэтому мы воспользуемся очень классной и простой jQuery библиотекой xCharts. Ещё нам понадобится календарь для выбора интервала дат. Мы будем использовать очень симпатичный и простой инструмент  daterange. Всё это сделает построение нашей диаграммы буквально за пару шагов. Формировать диаграмму будем асинхронно с помощью Ajax, а данные будем брать из MySql базы.

    HTML

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

<!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">

        <!-- Подключаем стили CSS для bootstrap -->
        <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>

        <!-- Подключаем плагин выбора диапазона дат и 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>

    Как видите, мы подключили довольно много внешних ресурсов, но из-за маленького размера, загружаться они будут очень быстро. И так, в разделе head, мы подключили стили для плагинов xcharts и datepicker, стиль bootstrap (идёт в комплекте с  cloudflare, супер быстрая cdn), и наконец стиль нашей странички style.css.

    Перед закрытием тега body, мы подключаем библиотеку jQuery, d3.js(требуется для xcharts), собственно сам xcharts, элегантный sugar.js (требуется для выбора диапазона дат), календарь (daterangepicker) и наш скрипт script.js.

    Результат наших трудов, вы сможете увидеть чуть ниже.

    Переходим к  MySQL

    Как я сказал вначале, данные для отображения диаграммы на экране, мы будем брать из таблицы MySql. Вы можете найти SQL код для создания необходимой таблицы в файле schema.sql, чтобы скачать архив с примером где находится это файл, нажмите по картинке «Скачать» вверху страницы.

    Схема таблицы:

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

    Примечание:  чтобы всё заработало, не забудьте про два момента: 
      1)    указать настройки вашей MySql базы в файле setup.php;
      2)    импортировать в выбранную базу данных файл schema.sql который создаст необходимую таблицу.

    PHP

    Наш PHP скрипт, просто будет выбирать данные из MySql базы, которые соответствуют указанному промежутку времени, собирать их в массив, и отсылать как 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();

    // Выбираем результаты из базы с помощью библиотеки 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);
}

    В этом скрипте, я использовал одну из моих любимых библиотек – Idiorm. Я использовал её и раньше (во многих моих уроках и личных проектах). Библиотека представляет собой единственный файл (находится в папке lib/) и делает работу с базами данных простой. Всё что я сделал, это вывел все результаты из базы которые подходят под выбранный диапазон дат.     В результате, JSON ответ будет выглядеть так:

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

    JSON ответ, представляет собой массив состоящий из пар, label содержит дату которую я взял из MySql базы, а value число продаж за этот день. Этот ответ, мы должны получить до использования плагина xCharts, иначе он просто не заработает, ведь мы не успеем предоставить ему необходимых данных.

    JavaScript

    Весь наш JavaScript код, находится в assets/js/script.js. Он довольно велик  и чтобы вам было по проще, я буду представлять вам его по кусочкам.

    Сначала мы создадим несколько переменных, которые будут хранить диапазон дат для плагина daterangepicker. Обратите внимание,  диапазон дат я формирую с помощью метода Date плагина sugar.js. Я решил пойти именно этим путём, потому что стандартный метод, может вызывать конфликты с xCharts.

assets/js/script.js

$(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 плагина для определения начальной и конечно точки диапазона. Далее я инициализирую скрипт с результатами за последние 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, // Количество надписей указываемых по горизонтали

    dataFormatX : function(x) {

        // Форматирование даты взятой из
        // ajax.php в объект JavaScript

        return Date.create(x);
    },

    tickFormatX : function(x) {

        // Предоставление форматирования для надписей по X.
       // Используется метод sugar's для объекта даты.

        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, указал что мы будем выводить по X и Y оси, после указал свойства для обратного вызова функции (callback). Потом с помощью метода dataFormatX я преобразовал возвращаемые из Ajax запроса данные о дате гг-мм-дд в надлежащий для JavaScript формат, сделал я это чтобы плагин смог правильно отобразить результаты и сделать расчёты. Чтобы вы могли видеть подсказки в точках диаграммы, я использовал события mouseover и mouseout, чтобы при наведении курсора мыши, появлялась подсказка, а после исчезала.

    И наконец, делаем асинхронный запрос к нашему PHP скрипту для получения данных:

   // Функции для загрузки данных через 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, поэтому если вас не устраивает данный вид, вы можете указать свой. Атрибут className является важной составляющей плагина, он используется для определения графика, поэтому пропускать его не стоит чтобы не возникало ошибок (уж поверьте мне).

    После завершения всех вышеописанных шагов, наш плагин можно считать завершённым.

    Ура, Мы сделали это!
    P.S. Вы можете использовать этот пример, чтобы повысить наглядность своей администраторской панели, и представлении статических данных в виде наглядного графика.

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 02.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 1383
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: