.: HosiriS :.

Informatica e non solo

Disegnamo dei grafici sui nostri siti

Posted by hosiris su settembre 22, 2011

Spesso mi si presenta il problema di avere una lista interminabile di dati e di doverli presentare in maniera compatta e leggibile, quale miglior modo si utilizzare dei grafici?
Bisogna capire che tecnologia utilizzare: PHP o Javascript?

Mentre per Javascript ho trovato una marea di soluzioni, per PHP sono stato limitato dalla mia poca conoscenza delle librerie GD, ma alla fine ho scelto le due soluzioni più conformi alle mie necessità: LibChart e Bluff.

La soluzione basata su LibChart lascia a desiderare dal punto di vista estetico, ma può essere sfruttata nel caso si vogliano generare dei report utilizzando ulteriori librerie PHP. Inoltre è molto semplice da utilizzare.
Una volta scaricata la libreria la scompattiamo nella nostra document root e la includiamo nel nostro script:


<?php
include "libchart/classes/libchart.php";
header("Content-type: image/png");
addPoint(new Point("06-01", 273));
$serie1->addPoint(new Point("06-02", 421));
$serie1->addPoint(new Point("06-03", 642));
$serie1->addPoint(new Point("06-04", 799));
$serie1->addPoint(new Point("06-05", 100));
$serie1->addPoint(new Point("06-06", 110));

$serie2 = new XYDataSet();
$serie2->addPoint(new Point("06-01", 280));
$serie2->addPoint(new Point("06-02", 300));
$serie2->addPoint(new Point("06-03", 212));
$serie2->addPoint(new Point("06-04", 542));
$serie2->addPoint(new Point("06-05", 600));
$serie2->addPoint(new Point("06-06", 850));

$dataSet = new XYSeriesDataSet();
$dataSet->addSerie("Product 1", $serie1);
$dataSet->addSerie("Product 2", $serie2);
$chart->setDataSet($dataSet);

$chart->setTitle("Sales for 2006");
$chart->render();
?>

Ottenendo il seguente risultato:

La soluzione che sfrutta javascript è sicuramente più allettante dal punto di vista estetico ed inoltre alleggerisce il carico di lavoro del server. Scarichiamo la libreria e scompattiamolo nella cartella del nostro sito. Scriviamo la seguente pagina:


<html>
        <head>
                <script src="js-class.js"></script>
                <script src="bluff-src.js"></script>
        </head>
        <body>
                <canvas id="example" width="400" height="300"></canvas>
                <script>
                        var g = new Bluff.Line('example', '800x300');
                        g.title = 'First Graph';
                        g.tooltips = true;

                        g.theme_greyscale();

                        g.data("Temp", [10, 12, 18, 20, 22, 26]);

                        g.labels = {0: 'Jan', 1: 'Feb', 2: 'Mar', 3: 'Apr', 4: 'May', 5: 'Jul'};

                        g.draw();
                </script>
        </body>
</html>

Vediamo subito che il codice non è complesso e il risultato non è male:

Credo che quest’ultima soluzione sarà la mia scelta definitiva visto che il mio server non ha la capacità di sostenere grossi carichi😛
Certo mi sono limitato a delle soluzioni che mi distogliessero per poco tempo da altri impegni… in rete si trovano tante altre librerie con soluzioni finali di certo migliori come: pChart, JpGraph, Open Flash Chart.

Buon divertimento

2 Risposte to “Disegnamo dei grafici sui nostri siti”

  1. blackout said

    prova le lib di google🙂 specie quelle delle “date” è una gran bella libreria (quella usata in analytics)

  2. […] Disegnamo dei grafici sui nostri siti ::: HosiriS […]

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: