Mostra la font per a Gràfiques amb Javascript: http://www.highcharts.com/

=Introducció=
*http://www.highcharts.com/
*http://www.highcharts.com/demo
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''':
<pre>
<?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");

?>
</pre>
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''':
<pre>
<!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>
</pre>
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.

{{Autor}}, maig 2013