[visualization-api] Re: How do I update a Google Gauge with MySQL data?

[Gabriel Mergulhao]

<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp°C', <?php
                            
                            $sql1 = "SELECT temperature from datalogger 
WHERE sensor_id='1' ORDER BY date_time DESC LIMIT 1";
                            $query1 = mysqli_query($GLOBALS['SQL'], $sql1);
if (mysqli_num_rows($query1) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($query1)) {
        echo $row["temperature"];
    }
} else {
    echo "0 results";
}], <!--Change temperature here-->
          
        ]);
<!--size of the gauge and some detail that can be altered here-->
        var options = {
          width: 400, height: 120,
 blueFrom: 0, blueTo: -10,
 greenFrom: 0, greenTo:20,
          redFrom: 40, redTo: 100,
          yellowFrom:20, yellowTo: 40,
          minorTicks: 5
        };

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

        chart.draw(data, options);
    
</script>

//////////////////////////
//////////////////////////

Adjust sql1 to your needs and global SQL to your DB info.


Am Montag, 27. März 2017 23:55:06 UTC+2 schrieb ANDREW EDWARDS:
>
> Hi,
>
> HELLLLLP!!!
>
> I am doing a project where I have to update a Temperature Gauge and a 
> Chart with data from a database (MySQL). I have created a webpage, created 
> the database table, used a gauge from Google Charts but I do not how to get 
> the gauge to work using the data from the database.
>
> Here is the code for the gauge, I need to know what type of code that I 
> have to use (AJAX, JSON etc) and then how do I get the result in to the 
> gauge.
>
> <script type="text/javascript">
> google.charts.load('current', {'packages':['gauge']});
> google.charts.setOnLoadCallback(drawChart);
>
> function drawChart() {
>
>         var data = google.visualization.arrayToDataTable([
>           ['Label', 'Value'],
>           ['Temp°C', 19], <!--Change temperature here-->
>           
>         ]);
> <!--size of the gauge and some detail that can be altered here-->
>         var options = {
>           width: 400, height: 120,
>  blueFrom: 0, blueTo: -10,
>  greenFrom: 0, greenTo:20,
>           redFrom: 40, redTo: 100,
>           yellowFrom:20, yellowTo: 40,
>           minorTicks: 5
>         };
>
>         var chart = new 
> google.visualization.Gauge(document.getElementById('chart_div'));
>
>         chart.draw(data, options);
>         setInterval(function() {
>           data.setValue(0, 1, 40 + Math.round(jsonData));
>           chart.draw(data, options);
>         }, 500);
>        
> }
> </script>
>
> I have been going crazy for the past week so any help or guidance will be 
> much appreciated.
>
> Thanks
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/ec228530-ccf4-43f3-9465-4ced4e8d2885%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.