Programare web

Cum să creezi un chart dinamic cu PHP, MySQL şi ChartJS

Chart-urile sunt o metodă grozavă de aranjare a datelor, oferind un suport vizual pe lângă informaţiile “brute”.Sunt o mulţime de script-uri în Javascript(+Jquery) care ne oferă această posibiliate, de a crea chart-uri, chiar şi interactive, dar nu dinamice.Adesea, informaţiile din chart-uri s-ar putea afla într-o bază de date, separate de locaţia unde se utilizează.

De aceea, m-am gândit să vă arăt cât de simplu este să faci un chart interactiv, cu PHP, MySQL şi ChartJS.

Presupun că acei dintre voi care citesc tutorialul au habar de PHP şi MYSQL şi nu mai e necesar să intrăm în detaliile de bază.

1.Inserarea unui chart static

Prima preocupare este să creăm un chart static, iar pentru a face asta vom folosi un plugin  foarte fain, ChartJS, creat în javascript şi care atribuie unui element canvas toate configurările şi scripturile necesare creării unui chart.Va trebui după ce descărcaţi să copiaţi în folderul dorit Chart.js, iar apoi să creaţi un markup asemănător cu acesta:

[cc lang=”html”]




Bar Chart






[/cc]

Tineţi cont de ordinea datelor din labels şi data, căci ele corespund, adică pentru Jan corespunde 32, Feb 54 ş.a.m.d.Dacă totul merge conform planului veţi obţine ceva asemănător cu imaginea de mai jos.
Chart static cu ChartJS

Nu voi explica ce face codul HTML, căci e de la sine înţeles, dar voi atrage atenţia asupra la data şi labels ce se află în script.Dacă observaţi, tipul informaţiilor este în format JSON, iar asta e super căci vom putea integra cu uşurinţă datele din PHP.

2.Crearea tabelului MySQL

Pentru scopul acestui tutorial, baza noastră de date se va numi chart, iar tabelul data.Acum va trebui să importaţi următorul cod SQL pentru a obţine ceea ce dorim.

[cc lang=”bash”]

— Bază de date: `chart`

CREATE DATABASE IF NOT EXISTS `chart` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `chart`;

— ——————————————————–


— Structura de tabel pentru tabelul `data`

CREATE TABLE IF NOT EXISTS `data` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`month` varchar(3) NOT NULL,
`data` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;


— Salvarea datelor din tabel `data`

INSERT INTO `data` (`id`, `month`, `data`) VALUES
(1, ‘Jan’, 32),
(2, ‘Feb’, 54),
(3, ‘Mar’, 130),
(4, ‘Apr’, 45),
(5, ‘Jun’, 87),
(6, ‘Jul’, 72),
(7, ‘Aug’, 122),
(8, ‘Sep’, 180);
[/cc]
Cu tabelul şi baza de date finalizate putem trece la cea mai faină parte a codului nostru şi anume la PHP.

3.Conectarea, selectarea şi formatarea informaţiilor cu PHP

[cc lang=’php’]
‘root’,
‘password’ => ”
);
$new = new PDO(‘mysql:host=localhost;dbname=chart’,$conf[‘username’],$conf[‘password’]);
$stmt = $new->prepare(“SELECT month,data FROM data”);
$stmt->execute(array());
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

for($i=0;$i
[/cc]

Iar acum să explicăm pe bucăţi codul de mai sus.

  1. Primul lucru pe care îl facem e un config array care conţine username-ul şi parola bazei de date MySQL.Nu este chiar necesar, dar este mai degrabă “a good pattern”, căci de cele mai multe ori, într-un proiect vei avea în alte fişiere aceste variabile pe care le vei reutiliza.
  2. Variabila new conţine un obiect PDO necesar conectării.Acesta are nevoie de 3 parametrii şi anume DNS, username şi parola.DNS-ul conţine engine-ul(mysql) şi baza de date.
  3. Apoi pregătim un statement, $stmt pe care îl executăm.Pentru cei mai curioşi care nu au habar de asta, căutaţi php prepaired statements să vedeţi magia din spate.
  4. Returnăm într-o variabilă conţinutul bazei de date.Puneţi variabila $rows într-un var_dump şi veţi vedea ceva ca mai jos:

Var Dump
Observaţi structurile de genul [0],[1],[2] care conţin alte două structuri, [month] şi [data].Aceste structuri se numesc multidimensional arrays.De aceea, pentru a accesa de exemplu, luna februarie vom avea nevoie de $rows[1][‘month’].Sper că prin această explicaţie vă puteţi da seama pentru ce e necesară instrucţiunea for.

Acum, va trebui sa separăm informaţiile din $rows în două variabile, necesare pentru cele 2 axe ale chart-ului, pe care le vom transmite în labels şi data din javascript.Pentru a înţelege de ce am adăugat paranteze drepte variabilelor $month şi $data v-aş ruga să consultaţi manualul PHP cu privire la array_push.

Şi în final, folosim funcţia json_encode, pentru a parsa informaţiile în format JSon.Dacă vă întrebaţi de ce folosim preg_match e pentru a scăpa de ” din string-ul JSon.

Ultimul lucru pe care trebuie să-l facem este să înlocuim în script datele.
[cc lang=”javascript”]
var barChartData = {
labels : ,
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
data :
}
]

}

var myLine = new Chart(document.getElementById(“canvas”).getContext(“2d”)).Bar(barChartData);
[/cc]
Pentru cei nerăbdători, de AICI puteţi descărca tot codul.

Şi gata…tocmai am creat un script cu PHP care preia datele din MySQL şi le parsează în format JSON unui string din Javascript.Desigur, dacă aveţi îmbunătăţiri şi idei nu vă sfiiţi a-mi spune căci, foarte probabil, ar fi de ajutor şi altora.

Write A Comment