Ciao a tutti.
Come da titolo mi chiedevo se qualcuno avesse mai realizzato grafici "google chart" collegati a database mysql.
Io ne ho realizzati diversi e fin qui nessun problema; il problema è nato quando ho deciso di evolvere i grafici inserendo al loro interno i "Controls and Dashboards". Con questi ultimi ho la possibilità di interagire con il grafico senza dover aggiornare la pagina.
Il problema è questo: quando carico la pagina il grafico mi mostra tutti i punti presenti nel database mysql (fin qui tutto OK); nella pagina è presente un bottone chiamato "Select range [12, 15]" e se lo clicco, il grafico mi dovrebbe essere ricostruito dal punto 12 al punto 15. Se tra il punto 12 e il punto 15 è presente un valore inferiore a 12 o superiore a 15, questo mi viene escluso dal grafico che mi andrà a ricostruire. Di conseguenza il grafico che ottengo è sbagliato perché mancano molti punti esclusi.
Secondo voi dove può essere il problema? Nella query?
Inserisco il codice php
Come da titolo mi chiedevo se qualcuno avesse mai realizzato grafici "google chart" collegati a database mysql.
Io ne ho realizzati diversi e fin qui nessun problema; il problema è nato quando ho deciso di evolvere i grafici inserendo al loro interno i "Controls and Dashboards". Con questi ultimi ho la possibilità di interagire con il grafico senza dover aggiornare la pagina.
Il problema è questo: quando carico la pagina il grafico mi mostra tutti i punti presenti nel database mysql (fin qui tutto OK); nella pagina è presente un bottone chiamato "Select range [12, 15]" e se lo clicco, il grafico mi dovrebbe essere ricostruito dal punto 12 al punto 15. Se tra il punto 12 e il punto 15 è presente un valore inferiore a 12 o superiore a 15, questo mi viene escluso dal grafico che mi andrà a ricostruire. Di conseguenza il grafico che ottengo è sbagliato perché mancano molti punti esclusi.
Secondo voi dove può essere il problema? Nella query?
Inserisco il codice php
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Dashboards</title>
</head>
<body>
<?php
// connessione al server ed al database
$con = mysql_connect ("localhost", "root","password") or die ("Connessione al server fallita!!!".mysql_error());
$db = mysql_select_db ("database", $con);
if (!$db)
{
die ("Connessione al database fallita!!!".mysql_errore());
}
$sth = mysql_query ("SELECT * FROM tabella");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
// "COSTRUISCO" INDICANDO I NOMI DELLE COLONNE DELLA TABELLA - UNA DEVE ESSERE IN FORMATO STRINGA E UNA IN FORMATO NUMBER
$table['cols'] = array(
array('label' => 'id', 'type' => 'string'),
array('label' => 'lettura', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth))
{
$temp = array();
$temp[] = array('v' => (string) $r['id']);
$temp[] = array('v' => (float) $r['lettura']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that programmaticSlider is visible to changeRange.
programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'lettura',
'ui': {'labelStacking': 'vertical'}
}
});
programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 700,
'height': 500,
'legend': 'none',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'value'
}
});
var data = new google.visualization.DataTable(<?=$jsonTable?>);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
}
</script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<table class="columns">
<tr>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
<div>
<button style="margin: 1em 1em 1em 3em" onclick="changeRange();">
Select range [12, 15]
</button><br/>
</div>
<script type="text/javascript">
function changeRange() {
programmaticSlider.setState({'lowValue': 12, 'highValue': 15});
programmaticSlider.draw();
}
</script>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
