lunedì 7 settembre 2009

Google Visualization API

Google mette a disposizione degli sviluppatori di applicazioni web una serie di API AJAX liberamente utilizzabili all'interno delle pagine HTML. Tali API permettono di arricchire in modo semplice le funzionalita di una pagina, per esempio, aggiungere mappe (Google Maps API), inserire la funzione di ricerca di google (Google AJAX Search API) oppure un meccanismo di traduzione all'interno delle proprie pagine web tramite Google AJAX Language API. E' disponibile una lista completa di tutte le AJAX API di google.

Le Google Visualization API, appartenenti anch'esse alle Google AJAX API, permettono di creare e visualizzare in modo molto semplice grafici di reportistica relativi a dati presenti in una qualsiasi sorgente di dati accessibile tramite il web e compatibile con le Visualization API. I dati da visualizzare possono essere strutturati in grafici, tabelle, mappe, grafi, etc...


Area ChartPie ChartIntensity mapOrg chart


Tali oggetti possono eventualmente catturare eventi, per esempio il click del mouse, e contenere dei link, permettendo di creare pagine ricche e interattive.
Per utilizzare le Visualization API è necessario seguire alcuni semplici passi:

1) Importare, nella sezione <head> della nostra pagina web, tramite il tag <script> il file JavaScript http://www.google.com/jsapi che definisce il 'core' delle Google AJAX API:      

 
<html>
 <head>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  ...
 </head>
 <body>
  ...
 </body>
</html>


2) Caricare, sempre nella sezione <head> della nostra pagina web, tramite il tag <script> le Google Visualization API e definire il tipo di visualizzazione che si vuole usare (es.: grafici a torta, grafici a barre, mappe, ...)

       
<html>
 <head>
  <script type="text/javascript">
   //Carica le Visualization API e la visualizzazione a grafico di torta di Google
   google.load('visualization', '1', {'packages':['piechart']});
  </script>
  <!--Carica la visualizzazione messa a disposizione da altri sviluppatori-->
  <script type="text/javascript" src="http://www.example.com/fabulous_extension.js"></script>
  ... 
 </head>
 <body>
  ...
 </body>
</html>

3) Registrare un gestore di inizializzazione e visualizzazione di dati tramite una funzione che si occupa di (usando la funzione onLoad()):
    • preparare i dati da visualizzare: ad ogni oggetto Visualization è associato un oggetto (di tipo DataTable ) che contiene 'fisicamente' i dati da visualizare. Un DataTable è una tabella bidimensionale, con righe, colonne e celle. Tutte le celle di una stessa colonna devono contenere dati omogenei (tipicamente stringhe o numeri)


        var data = new google.visualization.DataTable();
        // Declare columns and rows.
        data.addColumn('string', 'Task');  // Column 0 is type string and has label "Task".
        data.addColumn('number', 'Hours per Day'); // Column 1 is type number and has label "Hours per Day".
        
        // Add data.
        data.addRows([
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
          ]);



    • creare un istanza dell'oggetto Visualization (nel seguente listato 'chart_div' è l'ID del <div> all'interno della pagina HTML in cui verra posizionato l'oggetto visualization, <div id="chart_div"> </div>)


var chart = new google.visualization.PieChart(document.getElementById('chart_div'));


    • registrare e ricevere eventi: tali eventi possono essere generati dall'utente, per esempio click o passaggio del mouse, oppure automatici, generati per esempio da un timer


    • visualizzare i dati (è possbile definire alcune proprieta dell'immagine visualizzata, per esempio il titolo e le dimensioni)


chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});


4) visualizzare eventuali messaggi di errori in modo 'user-friendly' (ulteriori dettagli sulla visualizzazione di messaggi di errore).

Pubblicato da Santino Brescia alle 16:48
Etichette:

1 commento:

KLAUDYO ha detto...

Programmazione Java, dove sono le librerie da scaricare?
Sto seguendo programmazione java, di corejava dove trovo i package da
scaricare? Altro materiale? da sun.com ho già scaricato qualcosa.
Per vedere il risultato su textpad (editor di testo) ke e come fare? Come
si va al prompt dei comandi?
3 giorni fa - 1 giorno rimanenti per rispondere.
Dettagli aggiuntivi
Sono alle prime armi della programmazione,ho
scaricato Netbeans e anke Eclipse, ma quest'ultimo non sono riuscito ad avviarlo, Netbeans ha le istruzioni inglesi, ma per Java
JDK e altro ke fare,come fare? Per vedere il
risultato sullo skermo cosa fare? Textpad è
l'editor di testo+ semplice
2 giorni fa

Ho scaricato e installato altri editor di testo
(come simbolo Coniglio), però dopo ke scrivo le istruzioni come faccio a far apparire sul prompt dei comandi in DOS?
Sono proprio all'inizio della programmazione, cioé un Analfabeta!!!!
1 secondo fa

13 settembre 2009 alle ore 11:40

Posta un commento

Iscriviti a: Commenti sul post (Atom)