Google API
Google fornisce diverse API (Application Program Interface) utili per i programmatori di siti web per incorporare le tecnologie di Google nei propri prodotti. Alcune API danno la possibilità di inserire grafici di ogni tipo (comprese anche le mappe del mondo) e recentemente è cambiato il modo con cui si utilizzano lato programmatore.
Vecchie API
Le vecchie API fornivano una immagine generata dinamicamente tramite i parametri che venivano passati ad una specifica URL in cui veniva fornito il servizio di Google:
echo "<img src=http://chart.apis.google.com/chart?chtt=".urlencode($title)."&cht=t&chtm=world&chs=440x220&chco=eeeeee,FFffcc,cc3300&chd=t:0,".(implode(",",$values))."&chld=XX".(implode("",$labels)).">"; |
Qui sopra vediamo un codice php in cui si genera dinamicamente un tag img per la pagina html con cui si richiama un grafico avente un titolo (variabile chtt), dei dati (variabili chs) e delle label (variabili chld).
Su una pagina web potete quindi inserire tutti i grafici che volete, basta semplicemente aggiungere tanti tag img, uno per ogni grafico.
Nuove API
Le nuove API sono totalmente diverse e si basano su classi Javascript da richiamare opportunamente:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var parts = window.location.search.substr(1).split("&");
var $_GET = {};
for (var i = 0; i < parts.length; i++) {
var temp = parts[i].split("=");
$_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}
var pieTitle=$_GET['title'];
var values = $_GET['chd'].split(",");
var labels = $_GET['chl'].split("|");
var data = new google.visualization.DataTable();
data.addColumn('string', 'descr');
data.addColumn('number', 'visite');
for (var i = 0; i < values.length; i++) {
var descr=labels[i];
var num= parseInt(values[i]);
data.addRow([descr, num]);
}
var options = {
title: pieTitle
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 650px; height: 500px;"></div>
</body>
</html> |
Come si vede nella parte head del codice html, viene caricato il codice javascript con cui si genera dinamicamente l’immagine tramite chart.draw.
Le nuove API forniscono infatti immagini dinamiche in SVG o VML e si richiamano con un semplice tag div all’interno del body dell’html.
Fin qui tutto semplice, ma pensate a come si può aggiungere più immagini in una pagina!
Sembra che il nuovo sistema provochi molti problemi:
- Il codice Javascript è caricato nella parte head del codice, pertanto viene caricato sia che serva inserire l’immagine che non serva (esempio perchè all’utente non vuole visualizzarla)
- Se ci sono più immagini, il codice da inserire sull’head diventa molto complicato, dovendo usare un pool di classi dello stesso tipo
Soluzione
La soluzione è però più semplice del previsto: all’interno della pagina in cui vogliamo avere più grafici ci basta utilizzare il tag iframe con cui si richiama una pagina web html (quella che genera il grafico):
$chart="<iframe "; $chart = $chart." src=\"".plugins_url('newstatpress')."/includes/piecharts.html".iriGetGooglePie($fldtitle, $data)."\""; $chart = $chart." class=\"framebox\""; $chart = $chart." style=\"width: 100%; height: 550px;\">"; $chart = $chart." <p>[This section requires a browser that supports iframes.]</p>"; $chart = $chart."</iframe>"; |
L’esempio precedente è in php perchè appunto vogliamo una pagina con grafici dinamici.
Quello che si ottiene è pertanto dei grafici così:
Conclusioni
Per chi vuole cimentarsi con queste API, Google mette a disposizione anche un configuratore online, con cui si può giocare sui vari parametri di un grafico e vederne il risultato immediatamente.
Loading ...
7 Aprile 2013
Varie