PHP Server Side Charts Tutorial - diagrame bazate pe datele colectate

O cerinta foarte comuna a site-urilor de afaceri este crearea de diagrame bazate pe datele colectate de pe site pentru a afla diferite tipuri de informatii statistice ale utilizatorilor tinta si progresul actual al afacerii. Aceste informatii ajuta la cresterea rapida a afacerii. Deci, este necesar ca programatorul web sa dobandeasca cunostinte de baza despre crearea de diagrame. Graficele pot fi generate de scripturi de pe server si de pe partea clientului. Exista cateva avantaje si dezavantaje ale utilizarii diagramelor de pe server si de pe partea clientului. Diagrama generata de scripturile de pe server creste raza de incarcare a serverului si face ca site-ul sa fie mai lent, dar daca aveti suficienta performanta a serverului, acesta face ca frontul sa fie mai usor.

Graficele pot fi generate local prin preluarea datelor XML sau JSON de pe server in script-ul client-side. Diagrama creata de scripturile de pe partea clientului nu numai ca face descarcarea mai rapida, dar pot fi create si diferite diagrame personalizate, cum ar fi aplicarea animatiei in diagrama, crearea de diagrame atractive etc.

In acest tutorial, veti invata sa creati diagrama utilizand biblioteca de la server si PHP.

Diagrame de pe server Multe biblioteci de fisiere PHP din servere sunt disponibile in versiuni comerciale gratuite si comerciale. pChart, phpGraphLib, Chart4PHP etc. sunt biblioteci PHP pentru a crea o diagrama de pe server in pagina web. biblioteca pChart contine inca multe erori si nu este potrivita pentru crearea diagramei pentru pagina web. biblioteca phpGraphLib este utilizata in acest tutorial pentru a crea o diagrama de pe server.

phpGraphLib: Este o biblioteca deschisa open source PHP pentru crearea de diagrame intr-o pagina web si nu necesita instalarea si activarea oricarei extensii pentru utilizarea ca pChart. Diferite tipuri de diagrame pot fi usor create cu aceaDaca doriti sa creati o diagrama mai atractiva si o descarcare mai rapida, puteti utiliza orice biblioteca populara: Canvas.js, Fusioncharts, AmCharts etc. sta biblioteca. Are multe caracteristici de personalizare pentru a crea diverse diagrame de bare, diagrame placilor, diagrame stivuite etc., bazate pe date statice sau dinamice. Pentru a incepe sa lucrati cu aceasta biblioteca, accesati urmatoarea adresa URL pentru a descarca biblioteca phpgraphlib.

https://github.com/elliottb/phpgraphlib

Dupa descarcare, dezarhivati fisierul si stocati-l pe folderul / var / www / html pentru a rula fisierele de pe serverul apache.

Exemplu-1: Crearea diagramei barelor 3D

Scrieti urmatorul script si salvati fisierul in locatia serverului. Aici, fisierul este salvat in folderul / var / www / html / phpcode . O diagrama de bare 3D cu efect de gradient va fi creata atunci cand scriptul ruleaza. In grafic sunt prezentate inregistrarile de vanzari de 12 luni. O matrice este folosita aici pentru a stoca datele fictive ale graficului. Inaltimea si latimea graficului sunt definite atunci cand este creat obiectul din clasa phpgraphlib . createGraph () este apelata pentru a afisa graficul in browser.

addData($data);
$chart->setTitle('Monthly Sales Report');
$chart->setGradient('blue', 'green');
$chart->createGraph();
?>

iesire: Urmatorul iesire se va afisa atunci cand executati scriptul de pe server. http: //localhost/phpcode/chart1.php

Exemplu-2: Crearea diagramei 3D folosind doua seturi de date

Scrieti urmatorul script si salvati fisierul in locatia anterioara. Doua matrice de date sunt utilizate in script pentru a stoca inregistrarile de vanzari ale diferitelor produse electronice timp de doi ani consecutivi. Cresterea oricarei companii poate fi analizata prin crearea acestui tip de diagrama. Cum puteti personaliza aspectul graficului utilizand diferite metode de clasa phpgraphlib este, de asemenea, afisat in acest script.

 1000, "TV" => 550, "Laptop" => 800,"Air Cooler" => 690,
"Oven" => 560, "Washing Machine" => 300);
$d2=array("AC" => 1200, "TV" => 740, "Laptop" => 490,"Air Cooler" => 990,
"Oven" => 397, "Washing Machine" => 250);
$graph->addData($d1, $d2);
$graph->setBarColor('purple', 'blue');
$graph->setTitle('Product wise sales information of recent two years');
$graph->setupYAxis(12, 'blue');
$graph->setupXAxis(20);
$graph->setGrid(false);
$graph->setLegend(true);
$graph->setTitleLocation('left');
$graph->setTitleColor('green');
$graph->setLegendOutlineColor('yellow');
$graph->setLegendTitle('2016', '2017');
$graph->setXValuesHorizontal(true);
$graph->createGraph();
?>

Urmatorul iesire se va afisa atunci cand executati scriptul de pe server. http: //localhost/phpcode/chart2.php

Exemplu-3: Crearea diagramei

Scrieti urmatorul script si salvati fisierul in locatia anterioara. Pentru a crea o diagrama de placi , trebuie sa folositi o alta clasa PHPGraphLibPie. Acest script a folosit pentru a arata informatiile despre vanzarile de brand intelept.

 13, "Samsung" => 37,"Symphony" => 25, "Micromax" => 10,
"Lenavo" => 15);
$chart->addData($data);
$chart->setTitleColor('Blue');
$chart->setTitle('Brand wise sales information');
$chart->setLabelTextColor('35,55,75');
$chart->setLegendTextColor('15,59,67');
$chart->createGraph();
?>

 

Urmatorul iesire se va afisa atunci cand executati scriptul de pe server. http: //localhost/phpcode/chart3.php

Exemplu-4: Crearea diagramei stivuite

Scrieti urmatorul script si salvati fisierul in locatia anterioara. Trebuie sa utilizati clasa PHPGraphLibStacked pentru a crea diagrama stivuita. Acest script urmator va crea popularitate populara si viteza de utilizare a laptop-urilor utilizand o diagrama stivuita. Aici, inregistrarile a trei marci sunt adaugate in doua tablouri care sunt folosite pentru a crea diagrama stivuita.

60, 'HP'=>25, 'Acer'=>15);
$speed = array('Dell'=>50, 'HP'=>30, 'Acer'=>20);
$graph->addData($popularity, $cost, $speed);
$graph->setTitle('Laptop Performance Statistics');
$graph->setTitleLocation('left');
$graph->setXValuesHorizontal(TRUE);
$graph->setTextColor('blue');
$graph->setBarColor('#00ab55', '#60cdda');
$graph->setLegend(TRUE);
$graph->setLegendTitle('Popularity', 'Speed');
$graph->createGraph();
?>

Urmatorul iesire se va afisa atunci cand executati scriptul de pe server. http: //localhost/phpcode/chart4.php

Multe alte fisiere de clasa sunt disponibile in aceasta biblioteca pentru a crea diferite tipuri de diagrame. Toate datele utilizate in exemplele de mai sus sunt statice. Puteti sa preluati cu usurinta datele de pe serverul bazei de date folosind PHP si sa le utilizati pentru a crea diagrame bazate pe date dinamice.

Daca doriti sa creati o diagrama mai atractiva si o descarcare mai rapida, puteti utiliza orice biblioteca populara: Canvas.js, Fusioncharts, AmCharts etc.