Ajax: Plotting drawing charts using Jquery and Flot

Inanzitutto buon anno a tutti! WassUp, Il mio plugin per le statistiche su WordPress, sta andando molto bene, grazie anche all’aiuto di Helene, siamo arrivati a una versione soddisfacente, ma che lascia ancora molto spazio a nuove caratteristiche che piano piano implementeremo. Al momento sto lavorando sull’aggiunta di alcuni grafici realizzati “al volo” grazie all’impiego del solito ottimo Jquey e la libreria Flot, che cito testualmente fa proprio quello che mi serviva:

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming.

An example of Flot in action in WassUp next version

Con Flot e’ possibile creare dei bellissimi grafici in maniera molto semplice e con una varieta’ di opzioni impressionante.
La versione che al momento sto usando (0.3) ha ancora qualcosa da sistemare ma nel complesso e’ una libreria assolutamente fantastica per questo genere di cose, ma prendiamo WassUp come esempio e come anteprima su quello che verra’, per mostrarvi cosa Flot sia in grado di fare e come.

Dopo aver dichiarato lo script di Jquery e Flot, basta inserire dove si vuol far comparire il grafico il placeholder di Flot, in questo modo:

<div id="placeholder" style="width:100%;height:120px;"></div>

Come potete vedere, si dichiara qua le dimensioni del grafico, sara’ poi lui stesso a riadattare linee, barre e assi alle misure che vorremo impostare.

A questo punto vanno recuperati i dati (io uso delle query mysql, ma ovviamente i dati possono arrivare da qualsiasi fonte) e scritto il codice javascript con le opzioni che vogliamo:

<script id="source" language="javascript" type="text/javascript">
$(function () {
var options = {
lines: { show: true, fill: true, fillColor: "rgba(201, 216, 227, 0.4)", lineWidth: 4 },
points: { show: true, fill: true, radius: 4 },
legend: { position: "ne", backgroundOpacity: 0.6 },
xaxis: { tickDecimals: 0, noTicks: 4, tickFormatter: function(val) {
var datetime = new Date( val*1000);
return datetime.getDate() + "/" + (datetime.getMonth()+1) + "/" + datetime.getFullYear() + " " + datetime.getHours() + ":" + datetime.getMinutes();} },
yaxis: { min: 0, autoscaleMargin: 0.8 },
colors: ["#0077cc", "#f92a4a" ],
selection: { mode: "x" },
grid: { backgroundColor: "#ffffff" }
};

var d1 = [<?php print $ahits; ?>];

$.plot($("#placeholder"), [ {label: "<?php print $label; ?>", data: d1} ], options);
});
</script>

Per chi mastica Javascript e Php sara’ tutto limpido e chiaro per tutti gli altri l’idea e’ quella di avere delle opzioni, delle variabili di dati da graficare e un “contenitore” per mettere tutto assieme.

La sintassi e’ abbastanza semplice, si dichiarano le opzioni che sono quasi tutte facoltative (options) e poi si scrivono i dati da plottare nel grafico (d1). In questo caso “d1” equivale a una variabile php preimpostata contenente i dati x,y (timestamp,hits) ed essendocene una sola il grafico avra’ una sola linea (o barra).

Infine si racchiude il tutto dicendo di disegnare il grafico nel <div> che abbiamo in precedenza sistemato e chiamato #placeholder. Niente di piu’ semplice.

Con Flot si possono modificare quasi qualsiasi informazione sui grafici che vogliamo creare, si possono modificare:

In piu’ Flot offre a chi e’ piu’ esperto una certa interattivita’ con il grafico stesso, si puo’ richiedere lo zoom, o il fatto che sia cliccabile restituendo cosi’ informazioni sul click e nelle prossime versioni si avranno anche funzioni di onmouseover (per mostrare per esempio il valore di un punto passandoci sopra) e moltre altre caratteristiche che in questo momento mancano ma che presto saranno completate.

Penso che Flot sia una delle librerie piu’ belle e complete per creare grafici usando metodi avanzati ma allo stesso tempo semplici e intuitivi, in piu’ basandosi su Jquery, non ha bisogno di nient’altro per creare effetti e funzioni degni del web 2.0

Per approfondire Flot vi consiglio:

Tags: , , , , , , , , , , , , , , , ,

Post simili:

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

4 Responses to “Ajax: Plotting drawing charts using Jquery and Flot”
  1. Ajaxor
    00:18 on February 9th, 2012

    What about IE? it works?

  2. Demis
    23:27 on October 16th, 2010

    salve,

    sto provando ad utilizzare jquery,flot con dati da mysql.

    Non riesco perĂ² ad ottenere i grafici.

    E’ possibile avere un esempio completo passo passo con tutti
    i file php, javascript….

    grazie

    saluti

  3. Search Engine Panel
    12:33 on February 8th, 2008

    Ajax is great as a web 2.0 tool, but the most annoying thing about it is needing to learn JavaScript, which I find more difficult than PHP.

  4. CG
    17:37 on January 7th, 2008

    Ti suggerisco di dare un occhio anche a Google Chart Api, cosi’ non sei vincolato ad un framework javascript (jquery in questo caso)

    http://code.google.com/apis/chart/

    Ciao

Leave a comment

(required)

(required)


*

Categories