Vytvořte si hezké grafy pro svou aplikaci pomocí jQuery a xCharts

Grafy jsou skvělou vizuální pomůckou při prezentaci dat. Bez nich nemůžete vytvořit profesionální administrátorský panel. Jejich nastavení je také složité. Existuje však nová knihovna, která věci usnadňuje – xCharts. Dnes jej použijeme spolu s nástrojem pro výběr datového rozsahu pro Twitter Bootstrap k vytvoření pěkného grafu založeného na technologii AJAX pro vaši webovou aplikaci, která načítá data z tabulky MySQL.

HTML

Struktura HTML ukázky je velmi jednoduchá – na stránku musíme přidat prvky pro inicializaci grafu a pro výběr data. Vzhledem k tomu, že na stránku i tak začleňujeme bootstrap, můžeme využít jeho schopností tvarování formulářů a ikon, aby vypadala dobře.

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

        <!-- Include bootstrap css -->
        <link href="assets/css/daterangepicker.css" rel="stylesheet">
        <link href="https://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>

Zahrnujeme zde velké množství externích zdrojů. V sekci head máme soubory css pro xcharts , nástroj pro výběr data , bootstrap (zahrnuto ze super rychlého cdn cloudflare) a našeho style.css soubor.

Před koncovou značkou body máme jQuery knihovna, d3.js (vyžadováno xcharts), xcharts , elegantní knihovna sugar.js (vyžadovaná pluginem časového období), plugin časového období a naše script.js . V dalších krocích uvidíte, jak všechny tyto funkce spolupracují.

Tabulka MySQL

Jak jsem zmínil v úvodu, skript, který píšeme, načte svá data z tabulky MySQL a zobrazí je v grafu. SQL kód, který vytvoří tabulku, najdete v schema.sql v souboru zip, který je k dispozici ke stažení pomocí tlačítek výše. Takto vypadá tabulka:

Má pouze tři pole. Pole data má přiřazen jedinečný index, což znamená, že pro stejný den nemohou existovat duplicitní záznamy. Pole sales_ord obsahuje počet prodejů pro daný den. Vaše databáze se bude jistě lišit, ale pokud vrátíte správnou odpověď JSON z vašeho PHP skriptu, nebudou žádné problémy (více o tom v další části).

Kód PHP

V našem PHP skriptu vybereme z tabulky záznamy, které odpovídají předanému datu zahájení a ukončení, sestavíme pole a vydáme jej jako JSON:

ajax.php

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

// Set up the ORM library
require_once('setup.php');

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

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

    // Select the results with Idiorm
    $results = ORM::for_table('chart_sales')
            ->where_gte('date', $start)
            ->where_lte('date', $end)
            ->order_by_desc('date')
            ->find_array();

    // Build a new array with the data
    foreach ($results as $key => $value) {
        $data[$key]['label'] = $value['date'];
        $data[$key]['value'] = $value['sales_order'];
    }

    echo json_encode($data);
}

Zde používám svou oblíbenou knihovnu - Idiorm. Použil jsem to dříve v tutoriálech na webu (a v mnoha osobních projektech). Je to pouze jeden soubor (umístěný ve složce lib/) a dělá práci s databázemi čirou radostí. Vše, co dělám, je výběr všech výsledků z databáze, které mají hodnotu data mezi počátečním a koncovým časovým razítkem předaným s požadavkem.

Výsledná odpověď JSON vypadá takto:

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

štítek vlastnosti obsahují hodnoty data MySQL pro příslušný řádek a hodnoty - počet prodejů za daný den. Je na našem kódu JavaScript, aby s těmito daty správně naložil a převedl je do formátu vhodného pro použití s ​​pluginem xCharts.

JavaScript

Veškerý náš kód JS se nachází v assets/js/script.js . Kód je trochu dlouhý a pro snazší sledování vám ho představím po částech.

Nejprve deklarujeme několik proměnných a inicializujeme plugin pro výběr období. Všimněte si, že časové období, na které jsem odkazoval, je větev původního pluginu. Rozhodl jsem se jít s touto verzí, protože originál závisí na date.js - velmi staré knihovně data/času, která je v konfliktu s xCharts. Fork místo toho používá sugar.js, což je pěkná knihovna nástrojů s výkonnou podporou data a času.

assets/js/script.js

$(function() {

    // Set the default dates, uses sugarjs' methods
    var startDate   = Date.create().addDays(-6),    // 6 days ago
        endDate     = Date.create();                // today

    var range = $('#range');

    // Show the dates in the range input
    range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' -
        ' + endDate.format('{MM}/{dd}/{yyyy}'));

    // Load chart
    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);

    });

Jak vidíte, k definování počátečního a koncového bodu rozsahu dobře využíváme metody data a času sugar.js. Inicializuji skript s výsledky za posledních 7 dní a aktualizuji vstupní pole rozsahu.

Nyní vytvoříme graf:

    // The tooltip shown over the chart
    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) {

            // This turns converts the timestamps coming from
            // ajax.php into a proper JavaScript Date object

            return Date.create(x);
        },

        tickFormatX : function(x) {

            // Provide formatting for the x-axis tick labels.
            // This uses sugar's format method of the date object. 

            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();
        }
    };

    // Create a new xChart instance, passing the type
    // of chart a data set and the options object

    var chart = new xChart('line-dotted', data, '#chart' , opts);

Nejprve definuji konfigurační objekt pro xCharts s vlastnostmi a funkcemi zpětného volání. V dataFormatX vlastnosti, transformuji yyyy-mm-dd řetězce vrácené z požadavku AJAX na správné objekty JavaScript Date, aby je plugin mohl správně zobrazit a provádět své výpočty.

Také předávám obslužnou rutinu událostí pro události pluginu mouseover/mouseout a používám je k zobrazení tooltipu (plugin není součástí balení).

Nakonec je zde funkce JavaScriptu pro načítání dat pomocí AJAX:

   // Function for loading data via AJAX and showing it on the chart
    function ajaxLoadChart(startDate,endDate) {

        // If no data is passed (the chart was cleared)

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

            return;
        }

        // Otherwise, issue an AJAX request

        $.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 odhaluje setData tak můžete snadno nahradit zobrazená data. Atribut className je důležitý, protože to plugin používá k identifikaci vašeho grafu. Pokud tuto vlastnost vynecháte, objeví se všechny druhy podivných chyb (věřte mi, já vím).

Tím jsou naše pěkné grafy kompletní!

Máme hotovo!

Tento příklad můžete použít k vylepšení oblastí pro správu a k vizualizaci statistických dat v krásném rozhraní.