Passing Data to Google Line Graph
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi

From Google's line graph sample code
https://developers.google.com/chart/interactive/docs/gallery/linechart

how can I pass my data below in a simple way to the graph? I basically want a simple Fuel Vs Time line chart.... You can use either the Time_Stamp or DateTime_Inserted column

Data_Id Fuel_Level Time_Stamp DateTime_Inserted

119 73 180720030452 2018-07-20 03:04:53

120 66 180720030529 2018-07-20 03:05:29

121 73 180720030652 2018-07-20 03:06:53

122 66 180720030729 2018-07-20 03:07:30

123 73 180720030852 2018-07-20 03:08:53

Thanks

Hi sospeter, so this data will be fetched from mysql db or any other source? using php as middle ware to show the graph? I have a static solution ready, let me know if you need the above architecture in place.
SilverHood Apps 25 days ago

Crowdsource coding tasks.

1 Solution


Hi, what you will need is JSON (data exchange) and jQuery (to fetch data from php)

O/P of below solution: https://ibb.co/ivLXz9

Your JS + HTML :

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  //call for async data load via your back end
  google.charts.setOnLoadCallback(getData);

  function getData(){
    $.ajax({
        url: 'ds_fuel.php', // replace with your php file
        type: 'post',
        success: function (data) {
            drawChart(data); // call to show the chart
        },
    });
  }

  function drawChart(data) {

    var payload = JSON.parse(data);
    //get titles
    var title = payload[0].title;
    //get actual data
    var data = payload[1].data;


    var datat = new google.visualization.DataTable();
    datat.addColumn('string',title[0]);
    datat.addColumn('number',title[1]);
    //loop through data and add
    for(var i=0;i<data.length;i++){
      datat.addRow([data[i][0],parseInt(data[i][1])]);
    }

    var options = {
      title: 'Time vs Fuel',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    //finally show the chart
    chart.draw(datat, options);
  }
</script>
</head>
<body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

Your PHP:

<?php
  $payload = array();
  $title = array();
  $data = array();

  //title for yor graph as X and Y axis respectively
  $title = array("time","fuel");

  //loop your mysql select DateTime_Inserted,Fuel_Level from your table;
  //array_push($data,array($sTime,$fuel));

  array_push($data,array("2018-07-20 03:04:53","73"));
  array_push($data,array("2018-07-20 03:05:29","66"));
  array_push($data,array("2018-07-20 03:06:53","73"));
  array_push($data,array("2018-07-20 03:07:30","66"));
  array_push($data,array("2018-07-20 03:08:53","73"));

  array_push($payload,array("title"=>$title));
  array_push($payload,array("data"=>$data));

  echo json_encode($payload);
?>