Gràfiques amb Javascript: http://www.highcharts.com/
Introducció
Highcharts és una llibreria de Javascript potent, amb la qual es poden fer gràfiques dinàmiques de moltes menes com es pot veure en les demostracions.
En aquesta pràctica farem una gràfica recuperant dades d'una base de dades.
Desenvolupament
generar_fotos_stats.php:
<?php
/*
mysql> select left(nom_fitxer,4) as anymes,count(*) as num from FOTO where (nom_fitxer like '12%' or nom_fitxer like '13%') group by anymes
-> ;
+--------+-----+
| anymes | num |
+--------+-----+
| 1203 | 33 |
| 1204 | 193 |
| 1205 | 220 |
| 1206 | 26 |
| 1207 | 277 |
| 1208 | 73 |
| 1209 | 33 |
| 1210 | 106 |
| 1301 | 4 |
+--------+-----+
*/
include("open_db.php");
$myFile = "fotos_stats.json";
$fh = fopen($myFile, 'w') or die("can't open file");
$sql = "select left(nom_fitxer,4) as anymes,count(*) as num from FOTO where (nom_fitxer like '12%' or nom_fitxer like '13%') group by anymes";
$result = mysql_query($sql);
if (!$result) {
$message = 'Invalid query: ' . mysql_error() . "\n";
die($message);
}
$dades0 = "";
$dades1 = "";
while ($row = mysql_fetch_assoc($result)) {
$dades0 .= $row['anymes'];
$dades0 .= ",";
$dades1 .= $row['num'];
$dades1 .= ",";
$i++;
}
$dades0 = substr($dades0,0,strlen($dades0)-1);
$dades1 = substr($dades1,0,strlen($dades1)-1);
$dades = $dades0 . "*" . $dades1;
echo $dades;
include("close_db.php");
?>
El script anterior el que fa és preparar les dades (eix x i eix y) que es veuran a la gràfica. Les dades es separen per comes, i les dades de l'eix x i l'eix y es separen amb el caràcter comodí *. Aquesta informació s'enviarà amb una crida AJAX en el script següent.
stats_insectes.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<title>Highcharts - Base de dades</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var example = 'line-basic',
theme = 'default';
</script>
<script type="text/javascript" src="/demo/scripts.js"></script>
<script type="text/javascript">
(function($){ // encapsulate jQuery
$(function () {
$("#container2").load("generar_fotos_stats.php",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
//alert("External content loaded successfully!");
//alert(responseTxt);
var dades = responseTxt.split("*");
var dades0 = dades[0].split(",");
var dades1 = dades[1].split(",");
for(var i=0;i<dades1.length;i++){
dades1[i] = parseInt(dades1[i]);
}
// define the options
var options = {
chart: {
type: 'line'
},
title: {
text: 'Insectes stats'
},
xAxis: {
title: {
text: 'mes-any'
},
categories: dades0
},
yAxis: [{ // left y axis
title: {
text: 'num. insectes'
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'num_insectes',
}]
};
options.series[0].data = dades1;
$('#container').highcharts(options);
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
})(jQuery);
</script>
</head>
<body>
<h1>Highcharts - Base de dades</h1>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Fem una crida AJAX (amb JQuery) al fitxer generar_fotos_stats.php. Les dades obtingudes es fiquen en dues matrius: dades0[] que representa l'exi X, i dades1[] que representa l'eix Y. Les matrius s'aconsegueixen amb la funció split().
El quid del problema és entendre bé la funcionalitat de les gràfiques, i definir bé la variable options que és molt potent. El millor és mirar diferents demos a la pàgina web i quedar-se amb la més correcta.
creat per Joan Quintana Compte, maig 2013
