Construirea graficelor js. Grafic animat folosind HTML5 și JQuery. Biblioteca de vizualizare Dygraphs

Ați învățat cum să instalați și să utilizați Chart.js. De asemenea, ați învățat câteva opțiuni globale care vă permit să schimbați fontul și sfaturile instrumente pentru diferite grafice. În acest tutorial, știți cum să creați diagrame cu linii și coloane folosind Chart.js.

Crearea diagramelor cu linii

Diagramele cu linii sunt utile atunci când doriți să afișați modificarea valorii unei anumite variabile în raport cu modificările unei alte variabile. Cealaltă variabilă este de obicei temporară. De exemplu, diagramele cu linii pot fi folosite pentru a arăta viteza unui vehicul pe anumite perioade de timp.

Chart.js vă permite să creați diagrame cu linii setând tipul la linie . Iată un exemplu:

Var lineChart = new Chart(speedCanvas, ( tip: "line", date: speedData, opțiuni: chartOptions ));

Vom furniza acum datele, precum și parametrii de configurare de care avem nevoie pentru a construi diagrama cu linii.

Var speedData = ( etichete: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], seturi de date: [( eticheta: "Car Speed", date: , )] ); var chartOptions = ( legendă: ( afișare: adevărat, poziție: "sus", etichete: ( boxWidth: 80, fontColor: "black" ) ) );

În această parte, ne vom concentra pe diferite opțiuni special concepute pentru modificarea diagramelor cu linii. Toți parametrii și datele pe care le-am furnizat mai sus creează următorul grafic.

Culoarea zonei de sub curbă este determinată de tasta backgroundColor. Toate diagramele cu linii create folosind această metodă vor fi umplute cu această culoare. Puteți seta tasta de umplere la fals dacă doriți doar să desenați o linie, fără a umple zona de zi cu nicio culoare.

Un alt lucru pe care poate l-ați observat este că folosim indicatori de date individuale (puncte) pentru a reprezenta graficul. Biblioteca interpolează automat valorile tuturor celorlalte puncte folosind algoritmi încorporați.

În mod implicit, punctele sunt reprezentate folosind interpolarea cubică ponderată personalizată. Cu toate acestea, puteți seta tasta cubicInterpolationMode la monoton pentru o reprezentare mai precisă a punctelor dacă graficul pe care îl creați este definit de ecuația y = f (x) . Elasticitatea curbei Bezier este determinată de tasta lineTension. Îi poți seta valoarea egal cu zero a trasa linii drepte. Rețineți că această cheie este ignorată dacă cubicInterpolationMode este deja specificat.

De asemenea, puteți seta culoarea și lățimea chenarului folosind tastele borderColor și borderWidth. Dacă doriți să trasați o diagramă folosind o linie punctată în loc de o linie continuă, puteți utiliza tasta borderDash. Ia ca valori o matrice, ale cărei elemente definesc lungimea și, respectiv, distanța cursurilor.

Aspectul punctelor trasate poate fi controlat folosind proprietățile pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius și pointHoverRadius. Există, de asemenea, o cheie pointHitRadius, care determină distanța de la care punctele din grafic vor începe să interacționeze cu mouse-ul.

Var speedData = ( etichete: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], seturi de date: [( eticheta: "Car Speed", date: , lineTension: 0, umplere: fals, borderColor: „orange”, backgroundColor: „transparent”, borderDash: , pointBorderColor: „orange”, pointBackgroundColor: „rgba(255,150,0,0.5)”, pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "rectRounded" )] );

Obiectul speedData de mai sus afișează aceleași puncte de date ca și graficul anterior, dar cu valori diferite setate pentru toate proprietățile.

Puteți, de asemenea, să trasați mai multe linii pe un grafic și să setați diverși parametri să desenezi pe fiecare astfel:

Var dataFirst = ( etichetă: "Mașina A - Viteză (mph)", date: , lineTension: 0,3, // Setați mai multe opțiuni); var dataSecond = ( etichetă: „Mașină B - Viteză (mph)”, date: , // Setați mai multe opțiuni ); var speedData = ( etichete: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], seturi de date: ); var lineChart = new Chart(speedCanvas, ( tip: "line", date: speedData ));

Crearea diagramelor pe coloane

Diagramele pe coloane (sau histogramele) sunt utile atunci când doriți să comparați o măsurătoare pentru diferite obiecte - de exemplu, numărul de mașini vândute diferite companii, sau numărul de persoane dintr-un anumit grup de vârstă dintr-un oraș. Puteți crea diagrame cu bare în Chart.js setând tasta de tip la bară. În mod implicit, aceasta va crea diagrame cu coloane verticale. Dacă doriți să creați diagrame cu bare orizontale, trebuie să setați tipul la horizontalBar .

Var barChart = new Chart(densityCanvas, ( tip: "bar", date: densityData, opțiuni: chartOptions ));

Să creăm o histogramă care să afișeze densitatea tuturor planetelor din noi sistem solar. Datele despre densitate au fost preluate din Lista de informații despre planete furnizată de NASA.

Var densityData = ( etichetă: „Densitatea planetelor (kg/m3)”, date: ); var barChart = new Chart(densityCanvas, ( tip: "bar", date: ( etichete: ["Mercur", "Venus", "Pământ", "Marte", "Jupiter", "Saturn", "Uranus", " Neptun"], seturi de date: ) ));

Opțiunile de mai sus vor crea următoarea diagramă:

La fel ca în diagrame cu linii, dungile sunt umplute cu gri deschis. Puteți schimba culoarea barelor folosind tasta backgroundColor. De asemenea, culoarea și lățimea marginilor diferitelor dungi pot fi setate folosind tastele borderColor și borderWidth.

Dacă doriți ca biblioteca să nu deseneze margini pentru o anumită parte, puteți specifica partea ca valoare pentru cheia borderSkipped. Puteți seta următoarele valori: sus , stânga , jos sau dreapta . De asemenea, puteți modifica marginile și culoarea de fundal a diferitelor bare pe care le vedeți când treceți mouse-ul peste ele folosind hoverBorderColor și hoverBackgroundColor .

Mărimea coloanelor din diagrama cu bare de mai sus a fost calculată automat. Cu toate acestea, puteți controla lățimea coloanelor individuale folosind proprietățile barThickness și barPercentage. Tasta barThickness este folosită pentru a seta grosimea coloanelor în pixeli, iar barPercentage este folosită pentru a seta grosimea ca procent din lățimea grupului disponibil.

Să facem graficul densității (planeta) mai interesant, suprascriind valorile implicite pentru histograme folosind următorul cod.

Var densityData = ( etichetă: „Densitatea planetelor (kg/m3)”, date: , backgroundColor: [ „rgba(0, 99, 132, 0.6)”, „rgba(30, 99, 132, 0.6)”, „ rgba(60, 99, 132, 0.6)", "rgba(90, 99, 132, 0.6)", "rgba(120, 99, 132, 0.6)", "rgba(150, 99, 132, 0.6)" , "rgba(180, 99, 132, 0.6)", "rgba(210, 99, 132, 0.6)", "rgba(240, 99, 132, 0.6)" ], borderColor: [ "rgba(0, 99) , 132, 1)”, „rgba(30, 99, 132, 1)”, „rgba(60, 99, 132, 1)”, „rgba(90, 99, 132, 1)”, „rgba(120 , 99, 132, 1), „rgba(150, 99, 132, 1)”, „rgba(180, 99, 132, 1)”, „rgba(210, 99, 132, 1)”, „rgba ( 240, 99, 132, 1)" ], borderWidth: 2, hoverBorderWidth: 0 ); var chartOptions = ( scale: ( yAxes: [( barProcentage: 0,5 )] ), elemente: ( dreptunghi: ( borderSkipped: "left", ) ) ); var barChart = new Chart(densityCanvas, ( tip: "horizontalBar", date: ( etichete: ["Mercur", "Venus", "Pământ", "Marte", "Jupiter", "Saturn", "Uranus", " Neptun"], seturi de date: , ), opțiuni: chartOptions ));

Obiectul densityData este folosit pentru a stabili limite și culoarea de fundal coloane. Există două lucruri de remarcat în codul de mai sus. În primul rând, valorile proprietăților barPercentage și borderSkipped au fost setate în obiectul chartOptions în loc de obiectul dataDensity.

În al doilea rând, de data aceasta tipul de diagramă este setat la horizontalBar . Ceea ce înseamnă, de asemenea, că va trebui să modificați valoarea barThickness și barPercentage pentru axa Y în loc de axa X pentru ca aceste valori să aibă vreun efect asupra coloanelor.

Opțiunile de mai sus vor crea următoarea histogramă.

De asemenea, puteți reprezenta mai multe seturi de date pe aceeași diagramă prin atribuirea unui anumit ID de axă unui anumit set de date. Tasta xAxisID este folosită pentru a atribui un id oricărei axe X din setul de date. De asemenea, tasta yAxisID este folosită pentru a atribui un ID oricărei axe din setul de date. Ambele axe au, de asemenea, o cheie de identificare, pe care o puteți folosi pentru a le atribui identificatori unici.

Dacă ultimul paragraf a fost puțin confuz, următorul exemplu va ajuta la clarificarea lucrurilor.

Var densityData = ( etichetă: „Densitatea planetei (kg/m3)”, date: , backgroundColor: „rgba(0, 99, 132, 0.6)”, borderColor: „rgba(0, 99, 132, 1)”, yAxisID: „densitate-axa-y” ); var gravityData = ( etichetă: „Gravitatea planetei (m/s2)”, date: , backgroundColor: „rgba(99, 132, 0, 0.6)”, borderColor: „rgba(99, 132, 0, 1)”, yAxisID: "axa-y-gravitație" ); var planetData = ( etichete: ["Mercur", "Venus", "Pământ", "Marte", "Jupiter", "Saturn", "Uranus", "Neptun"], seturi de date: ); var chartOptions = ( scale: ( xAxes: [( barPercentage: 1, categoryPercentage: 0,6 )], yAxes: [( id: "y-axis-density" ), ( id: "y-axis-gravity" )] ) ) ; var barChart = new Chart(densityCanvas, ( tip: "bar", date: planetData, opțiuni: chartOptions ));

Aici am creat două axe Y cu identificatori uniciși au fost atribuite seturi de date separate folosind cheia yAxisID. Cheile barPercentage și categoryPercentage sunt folosite pentru a grupa coloanele pentru planete individuale. Se setează categoriaProcent la mai mult valoare scăzută pentru a mări distanța dintre coloanele diferitelor planete. De asemenea, setați barPercentage la mai mult valoare mare, vom reduce distanța dintre coloanele aceleiași planete.

În sfârșit

În acest tutorial, am acoperit toate aspectele diagramelor cu linii și coloane în Chart.js. Acum ar trebui să puteți crea diagrame de bază, să le schimbați aspectul și să afișați mai multe seturi de date pe o singură diagramă fără probleme. În următoarea parte a seriei, veți afla despre diagramele radiale și polare în Chart.js.

Sper că v-a plăcut acest tutorial. Dacă aveți întrebări, vă rugăm să le postați în comentarii.

• Traducere

Este aproape imposibil să ne imaginăm un tablou de bord fără diagrame și grafice. Ele afișează rapid și eficient statistici complexe. În plus, o diagramă bună îmbunătățește și designul general al site-ului dvs.

În acest articol vă voi arăta câteva dintre cel mai bun JavaScript biblioteci pentru crearea de diagrame/scheme (și tabele pivot). Aceste biblioteci vă vor ajuta să creați grafice frumoase și personalizabile pentru proiectele dvs. viitoare.

Deși majoritatea bibliotecilor sunt gratuite și redistribuibile, unele dintre ele au versiuni plătite cu funcționalități suplimentare.

D3.js - Documente centrate pe date Astăzi, când ne gândim la grafice, primul lucru care ne vine în minte este D3.js. sursă deschisă proiect, D3.js, fără îndoială, dă mult caracteristici utile, de care lipsesc majoritatea bibliotecilor existente. Caracteristici precum „Enter and Exit”, tranziții puternice și o sintaxă similară cu jQuery sau Prototype o fac una dintre cele mai bune biblioteci JavaScript pentru crearea de grafice și diagrame. În D3.js, acestea sunt generate folosind HTML, SVG și CSS.

Spre deosebire de multe alte biblioteci JavaScript, D3.js nu vine cu grafice prefabricate imediat din cutie. Cu toate acestea, puteți arunca o privire la lista de grafice create cu D3.js pentru a vă face o idee generală.

D3.js nu funcționează corect cu browsere mai vechi, cum ar fi IE8. Dar puteți utiliza oricând plugin-uri precum pluginul aight pentru compatibilitate între browsere.

D3.js a fost folosit anterior pe scară largă pe site-uri web precum NYTimes, Uber și Weather.com

Google Charts

Diagrame Google - Biblioteca JavaScript, pe care îl folosesc în mod regulat pentru a crea diagrame simplu și ușor. Oferă o varietate de diagrame pre-construite, cum ar fi diagrame cu bare combinate, diagrame cu bare, diagrame calendaristice, diagrame circulare, diagrame geografice etc.

Google Charts are, de asemenea, o varietate de setări de configurare care vă pot ajuta să schimbați aspectul diagramei. Grafica este generată folosind HTML5/SVG pentru a asigura compatibilitatea între browsere și portabilitatea pe mai multe platforme pe iPhone, iPad și Android. De asemenea, conține VML pentru a suporta versiuni mai vechi de IE.

Highcharts JS

Highcharts JS este o altă bibliotecă de grafice foarte populară. Terminat un număr mare animații de diferite tipuri care pot atrage multă atenție asupra site-ului dvs. Ca și alte biblioteci, HighchartsJS conține multe diagrame pre-create: spline, formă, combinație, coloană, histogramă, plăcintă, scatter etc.

Una dintre cele mai multe mari beneficii Aplicații HighchartsJS – compatibilitate cu browsere mai vechi, cum ar fi Internet Explorer 6. Browsere standard utilizați SVG pentru a reda grafice. În IE vechi, graficele sunt construite prin VML.

Deși HighchartsJS este gratuit pentru uz personal, trebuie să achiziționați o licență pentru uz comercial.

Fusioncharts

Fusioncharts este una dintre cele mai vechi biblioteci JavaScript, lansată pentru prima dată în 2002. Graficele sunt generate folosind HTML5/SVG și VML pentru o mai bună portabilitate și compatibilitate.

Spre deosebire de multe biblioteci, Fusioncharts oferă capacitatea de a analiza atât datele JSON, cât și XML. De asemenea, puteți exporta aceste grafice în 3 diferite formate: PNG, JPG și PDF.

Fusioncharts este foarte compatibil cu browsere mai vechi, cum ar fi IE6. Și din acest motiv, a devenit una dintre bibliotecile cele mai preferate în multe organizații comerciale.

Puteți utiliza gratuit versiunea cu filigran a Fusioncharts atât în ​​proiecte personale, cât și în cele comerciale. Cu toate acestea, trebuie să achiziționați o licență pentru a scăpa de filigran.

Flot

Flot este o bibliotecă JavaScript pentru JQuery care vă permite să creați grafice/diagrame. Una dintre cele mai vechi și mai populare biblioteci de diagrame.

Flot acceptă diagrame cu bare, diagrame cu dispersie, diagrame cu bare, diagrame cu coloane și orice combinație a acestor tipuri de diagrame. De asemenea, compatibil cu browsere mai vechi, cum ar fi IE 6 și Firefox 2.

Flot este complet gratuit, suportul comercial este oferit de cerere specială dezvoltator. Iată o listă de exemple cu diagrame create în Flot.

amCharts

amCharts este, fără îndoială, una dintre cele mai bune biblioteci de diagrame de acolo. Este complet împărțit în 3 tipuri independente: Diagrame JavaScript, Diagramele Hărți (amMaps) și Diagramele bursiere.

AmMaps este preferatul meu dintre cele trei de mai sus. Oferă funcții precum hărți termice, trasarea liniilor, adăugarea de text pe hartă, încărcarea pictogramelor sau fotografiilor în partea de sus harta dvs., schimbarea scarii etc.
amCharts folosește SVG pentru a reda diagrame care funcționează numai în browsere moderne. Este posibil ca graficele să nu se afișeze corect în IE sub versiunea 9.

EJS Chart este oferit gratuit și versiuni plătite. Versiune gratuită are o limitare care nu vă permite să utilizați mai mult de 1 diagramă pe pagină și mai mult de două secvențe (numerice) pe diagramă. Consultați detaliile prețurilor.

uvCharts

uvCharts este o bibliotecă JavaScript open source care pretinde că are peste 100 de opțiuni de configurare. Are 12 grafice diverse standarde direct din cutie.

UvCharts este construit pe biblioteca D3.js. Acest proiect promite să elimine toate nuanțele complexe ale codificării D3.js și să ofere o implementare ușoară a graficelor vedere standard. uvCharts este generat folosind SVG, HTML și CSS.

Concluzie Acum alegerea celei mai bune biblioteci de diagrame pentru proiectele tale viitoare depinde de tine. Dezvoltatori care au nevoie control deplin peste grafice, cu siguranță vor alege D3.js. Aproape toate bibliotecile de mai sus au un suport bun pe forumurile Stackoverflow.

Sper că v-a plăcut acest articol. Să aveţi o zi bună.

În ceea ce privește interacțiunea, Fleet vă va aduce cu siguranță cât mai aproape posibil de grafica Flash de jQuery. În timp ce rezultatul graficului este destul de elegant și arată grozav, puteți interacționa și cu punctele de date. Ceea ce vreau să spun este că poți să treci cu mouse-ul peste un punct de date și să obții feedback vizual despre valoarea acelui punct pe grafic.

Versiunea pentru flotă a portbagajului acceptă diagrame circulare.

Posibilitatea de scalare a flotei.

În plus, aveți și opțiunea de a selecta o porțiune de grafic pentru a returna date pentru o anumită „zonă”. Ca o caracteristică suplimentară la această „zonare”, puteți, de asemenea, să selectați o zonă din grafic și să măriți pentru a vedea punctele de date puțin mai aproape. Foarte misto.

Constrângeri Sparklines: plăcintă, linie, bară, combinație

Sparklines este mini instrumentul meu preferat de grafică. Foarte grozav pentru graficele stil tablou de bord (gândiți-vă la tabloul de bord instrumente Google Analytics data viitoare când vă conectați). Deoarece sunt atât de mici, pot fi incluse într-un șir (ca în exemplul de mai sus). O altă idee bună care poate fi folosită în toate pluginurile grafice este capacitățile de auto-actualizare. Demo-ul lor Mouse-Speed ​​​​vă arată puterea graficelor live la maxim.

Solicitați diagrama 0.21 Constrângeri: Arie, Linie, Bară și combinații ale acestora

jQuery Chart 0.21 nu este cel mai frumos plugin de diagrame, ar trebui să fie listat acolo. Funcționalitatea este destul de simplă atunci când vine vorba de graficele pe care le poate gestiona, totuși poate fi flexibil dacă îi poți dedica ceva timp și efort.

Adăugarea de valori la o diagramă este relativ simplă:

ChartAdd(( "eticheta" : "Leads", "type" : "Linie", "culoare": "#008800", "valori": ["100","124","222","44"," 123","23","99"] ));

Limitări jQchart: bară, linie

jQchart este ciudat, au încorporat tranzistori animați și funcționalitate de glisare și plasare în diagramă, totuși este un pic cam greoi - și aparent inutil. Generează diagrame cu aspect frumos dacă înțelegi corect CSS, dar există lucruri mai bune.

Limitări TufteGraph: bară și bară stivuită

Tuftegraph se comercializează ca „grafice cu bare frumoase pe care le vei arăta mamei tale”. Se apropie, Flota este mai drăguță, dar Tufte se face foarte ușor. Deși acest lucru pune capăt limitărilor - există mai multe opțiuni din care să alegeți, astfel încât să obțineți ceea ce specificați. Uită-te la cardul de câștig rapid.

Utilizarea graficelor și diagramelor are aplicații foarte largi. Cu ajutorul lor, puteți afișa o mulțime de informații într-o formă convenabilă și de înțeles și, prin urmare, le puteți înțelege și înțelege rapid.

Există mai multe moduri de a adăuga un grafic sau o diagramă la o pagină web. Prima, la care probabil te-ai gândit deja, este să-l desenezi în orice editor grafic. Dar aceasta nu este cea mai convenabilă și mai rapidă opțiune. Este mult mai ușor și mai rapid să faci un grafic în JavaScript, unde trebuie să specificați totul parametrii necesari, vizualizați-l și plasați-l pe pagină.

În acest articol, vă vom spune despre 10 servicii și instrumente care vă vor ajuta să creați grafice și diagrame în JavaScript. Veți găsi alte metode de creare în secțiunea „”.

Cacealma
Pentru a desena un grafic cu linii folosind acest serviciu, trebuie doar să copiați câteva linii de cod, să setați parametrii necesari și să adăugați text. Codul este atât de simplu și clar încât îl puteți da seama în doar câteva secunde.

Cu PlotKit puteți construi diagrame și grafice care se vor afișa corect în toate browserele. Pe site veți găsi documentație, exemple de tipuri de diagrame și ghid rapid(cu o descriere a tuturor parametrilor și setărilor) pentru a începe rapid.

Acest serviciu vă permite să realizați caracteristici vizuale grozave. Introduceți o ecuație, de exemplu 2*sin(4*x)^(x+4), apăsați „Enter” și funcția este gata. După aceea, tot ce trebuie să faceți este să copiați adresa URL și să o inserați în pagina dvs.

Cel mai puternic instrument pentru construirea de tabele, grafice și diagrame folosind jQuery. Pe site veți găsi exemple de toate tipurile de grafice, precum și descriere detaliată parametrii și pașii de configurare.

Flot
Biblioteca de diagrame jQuery de la Google. Nu este nevoie să mai scrieți nimic despre asta, totul este deja clar (: Dar remarcăm totuși că serviciul oferă cantitate uriașă exemple frumoase cu configurare flexibilă și ușoară.

Vă permite să creați diagrame și tabele histograme de date. Pentru a construi, trebuie să introduceți datele necesare și să faceți clic pe butonul „Calculați”. Apoi copiați codul și descărcați scenariu mic. Dacă se dorește, toate datele pot fi introduse în codul propriu-zis.

Serviciul oferă 6 tipuri de diagrame ( diagramă circulară, grafic linie, diagramă dinamică și 3 tipuri de histograme). Există o descriere a setărilor, parametrilor și exemple detaliate toate tipurile de diagrame.

Rafael
Raphaël este o mică bibliotecă JavaScript care face crearea de grafice și diagrame mult mai ușoară. Acesta este cel mai puternic instrument dintre toate cele prezentate în această recenzie. Vă va fi mai ușor să vedeți singur capacitățile bibliotecii decât să citiți o descriere a capacităților acesteia.

Plotr
Bibliotecă pentru crearea de diagrame pe Mootools. Instrument grozav, care prezintă informațiile într-un mod frumos și ușor de înțeles. Și pentru a-l configura trebuie doar să modificați sau să adăugați valori.

Capacitățile acestui serviciu vă permit să construiți grafică 3D. Dintre funcționalități merită evidențiate configurare ușoară, operare rapidă de script și capacitatea de a construi grafice cosinus și sinus.

Graficele sunt un ajutor vizual excelent la prezentarea datelor. Fără ele, este imposibil să creați un panou de administrare de înaltă calitate. Nu sunt atât de ușor de instalat. Cu toate acestea, există bibliotecă nouă, care facilitează această sarcină este xCharts. Astăzi vom folosi acest program împreună cu paleta Interval de date a Twitter Bootstrap pentru a crea un grafic AJAX frumos pentru aplicația dvs. web care extrage date din Tabelele MySQL.

HTML

Structura demonstrativă a acestui limbaj este destul de simplă - trebuie să adăugăm elemente pe pagină pentru a începe să tragem și să selectăm informații. Deoarece activăm oricum încărcarea pe pagină, putem folosi stiluri de pagină și pictograme pentru a oferi acestei structuri un aspect frumos.

index.php

Grafice frumoase cu jQuery și AJAX | Tutorialzine Demo

Aici sunt folosite o mulțime de resurse externe. În secțiunea principală avem fișiere de foaie de stil în cascadă pentru xCharts, sortator de numere, încărcare (integrat de la super rapid CDN CloudFlare), și fișierul nostru style.css.

Înainte de a închide comanda rapidă pentru tabel, avem biblioteca JQuery, d3.js (necesar de programul xсharts), xcharts, o bibliotecă cu interfață ușor de utilizat sugar.js (care necesită un plugin „interval de date”), un plugin „interval de date” și un fișier script.js. În continuare, veți vedea cum funcționează totul împreună.

MySQL

După cum am menționat în introducere, scriptul pe care îl scriem va prelua date dintr-un tabel MySQL și le va afișa într-o diagramă. Puteți găsi codul SQL care va crea tabelul în schema.sql într-un fișier comprimat disponibil pentru descărcare folosind butoanele de sus. Tabelul va arăta astfel:

Are doar trei coloane. Coloanei datei i se atribuie un index unic, ceea ce înseamnă că nu pot exista intrări duplicat în aceeași zi. Coloana „înregistrări vânzări” înregistrează numărul de vânzări din timpul zilei. Baza de date va fi cu siguranță diferită, dar atâta timp cât obțineți răspunsul corect în formatul de structurare a datelor într-un format text simplu folosit pentru a schimba informații JSON dintr-un script PHP, nu vor fi probleme (mai multe despre asta în următorul secțiune).

Notă: Nu uitați să introduceți datele dvs conexiuni MySQLîn setup.php. Apoi va trebui să creați noua baza Date MySQLși importați schema.sql din sistemul PHPMyAdmin sau din sistemul de management ales.

PHP

În nostru Script PHP vom selecta înregistrările din tabel care corespund informațiilor inițiale și finale transmise, vom colecta toate datele într-o matrice și le vom afișa în format text schimb de date (JSON):

ajax.php

Antet ("Content-Type: application/json"); // configurarea bibliotecii require_once("setup.php"); if (isset($_GET[„start”]) AND isset($_GET[”sfârșit”])) ( $start = $_GET[”start”]; $end = $_GET[”sfârșit”]; $date = array(); // selectează rezultatele $rezultate = ORM::for_table("chart_sales") ->where_gte("data", $start) ->where_lte("data", $end) ->order_by_desc("data") ->find_array(); // creează o nouă matrice cu date foreach ($rezultate ca $key => $value) ( ​​​​$data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; echo json_encode($data);

Aici folosesc biblioteca mea preferată - Idiorm. L-am folosit în trecut pentru consultații de site-uri web (și multe proiecte personale). Acesta este un singur fișier (situat în bibliotecă/dosar) și face lucrul cu bazele de date foarte ușor. Tot ce fac este să preiau toate rezultatele din baza de date care au o valoare de timp între marcajele de timp de început și de sfârșit, în concordanță cu cererea de informații.

Răspunsul JSON rezultat arată cam așa:

[( „etichetă”: „07-01-2013”, „valoare”: „4” ), ( „etichetă”: „06-01-2013”, „valoare”: „65” ), ( „etichetă”: „2013-01-05”, „valoare”: „96”)]

Proprietățile etichetei conțin valorile numărului MySQL în rândul corespunzător, iar coloanele conțin numărul de vânzări pentru ziua respectivă. Depinde doar Cod JavaScript pentru a procesa corect aceste date și a le transforma într-un format potrivit pentru partajarea cu pluginul xCharts.

JavaScript

Tot codul JS este în assets/js/script.js. Codul este puțin lung și, pentru a fi mai ușor de urmărit, vi-l voi prezenta pe părți.

Mai întâi vom seta câteva variabile și vom inițializa pluginul de selectare a intervalului de date. Vă rugăm să rețineți că intervalul de date pe care l-am folosit este o furcă din pluginul original. Am decis să lucrez cu această versiune, deoarece originalul depinde de date.js, o bibliotecă de date moștenită care intră în conflict cu xCharts. În schimb, se folosește sugar.js - o bibliotecă excelentă utilă cu informații fiabile și actualizate.

assets/js/script. js

$(function() ( // setați datele standard folosind funcțiile shugar var startDate = Date.create().addDays(-6), // cu 6 zile în urmă endDate = Date.create(); // astăzi var interval = $ ( "#interval"); // afișează datele în ordinea intrării range.val(startDate.format ("(MM)/(dd)/(aaaa)") + " - " + endDate.format ("(MM)/ (dd)/(aaaa)")); // se încarcă graficul ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, intervale: ( „Astăzi”: [„azi”, „azi” " ], "Ieri": ["ieri", "ieri"], "Ultimele 7 zile": , "Ultimele 30 de zile": // Puteți adăugați mai multe intrări aici ) ),function(start, end)( ajaxLoadChart(start, end); ));

După cum puteți vedea, am folosit cu succes informațiile și metodele sugar.js pentru a determina punctul de început și de sfârșit al intervalului. Am introdus rezultatele ultimelor 7 zile în script și am actualizat câmpul de intrare.

Acum să creăm un grafic:

// indiciu când se îndreaptă spre diagramă var tt = $("").appendTo("body"), topOffset = -32;

Mai întâi definesc un obiect de configurare xCharts cu proprietățile sale și funcții inverse. În proprietatea dataFormatX, transform șirurile aaaa-mm-zz returnate de la cererea AJAX în obiecte JavaScript Date adecvate, astfel încât pluginul să le poată afișa corect și să-și facă calculele.

De asemenea, folosesc un handler de informații pentru pluginul mouseover/mouseout și îl folosesc pentru a afișa un tooltip (plugin-ul nu vine cu unul dintre module).

În sfârșit iată-l Funcția JavaScript pentru a încărca date prin AJAX:

// funcția de încărcare a datelor prin AJAX și afișarea lor pe funcția de diagramă ajaxLoadChart(startDate,endDate) ( // dacă nu există date, diagrama va fi goală if(!startDate || !endDate)( chart.setData(() "xScale" : "time ", "yScale" : "linear", "principal" : [( className: ".stats", data: )] ) // în caz contrar, form; cerere ajax$.getJSON(„ajax.php”, ( început: startDate.format(„(aaaa)-(MM)-(zz)”), sfârșit: endDate.format(„(aaaa)-(LL)-(zz) ") ), function(data) ( var set = ; $.each(data, function() (set.push(( x: this.label, y: parseInt(this.value, 10) )); )); chart.setData(( "xScale" : "time", "yScale" : "liniar", "principal" : [( className: ".stats", date: set )] ));

) ));

xCharts oferă o metodă setData, astfel încât să puteți muta sau înlocui cu ușurință datele afișate. Atributul className este important deoarece este ceea ce folosește pluginul pentru a vă defini graficul. Dacă îl ignori, se pot întâmpla tot felul de bug-uri ciudate (crede-mă, știu).

Aceasta completează frumoasa noastră diagramă!

Sfârşit!