Plugin jQuery pentru grafice


La un plugin jQuery pentru trasat grafice ţi s-ar părea normal să i se spună plot… doar că îi spune flot. Autorul este un danez, iar flot pare a însemna în daneză chipeş, frumuşel, atrăgător, inteligent ş.a. Ei bine, cu frumuşel aş putea fi de acord. Flot este un script frumuşel care îţi permite din doar câteva linii de cod să trasezi un grafic în HTML. Dacă faci în PHP sau ASP, luând de exemplu datele dintr-o bază de date, atunci acest plugin devine poarta pentru ca datele să nu fie seci ci prezentabile.

flot.jpg

Să o luăm sistematic. Pluginul îl găsiţi pe Google Code, acolo fiind şi documentaţia, foarte scurtă. Pasul doi ar fi exemplele. De fapt eu vă propun să fie primul pas, pentru a vă face o idee despre puterea şi limitările acestui plugin. După cum veţi vedea pe Google Code, pluginul e oficial la versiunea 0.1 (să zicem: primele luni de viaţă). Pe situl cu exemple este însă versiunea 0.2. Eu am lucrat cu aceasta testele. În afară de pluginul Flot trebuie evident să includeţi librăria jQuery, dar şi una pentru desenare. Vor fi deci trei include-uri pentru excanvas.js, jquery.js şi jquery.flot.js. Atenţie: primul include are nevoie de o sintaxă specială, dar veţi vedea în sursa exemplelor cum trebuie mai exact.

Secvenţa jQuery pentru graficul de mai sus este aceasta:

$(function () {
  var d1 = [];
  for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);
  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  $.plot($("#placeholder"), [ d1, d2 ]);
});

După cum vedeţi se definesc două şiruri: primul conţine nişte valori generate cu funcţia sinus (de acolo linia ondulată), iar al doilea conţine nişte valori indicate manual. Apoi apelul funcţiei plot care primeşte ca parametru div-ul unde doriţi să apară graficul şi "liniile" din grafic. Veţi avea deci în partea HTML ceva de genul:

<div id="placeholder" style="width:600px;height:300px"></div>

Să revedem punctele tari:

– foarte simplu de folosit, din doar câteva linii de cod putând avea un grafic simplu dar care nu arată rău!
– după cum veţi vedea din exemple se pot şi chestiuni mai avansate, precum marcarea punctelor pe grafic sau afişarea sau ascunderea unei linii de grafic în mod dinamic (fără reîncărcarea paginii)

Şi punctele slabe:

– nu există şi variante de grafic, gen pie (plăcintă)
– proiectul e foarte la început, deci trebuie folosit cu ceva rezerve

Să sperăm că danezul se va ţine de proiect şi vom avea în timp un instrument redutabil pentru grafice generabile online.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 4,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *