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


From Google's line graph sample code

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


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 over 1 year 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:

Your JS + HTML :

<script src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  //call for async data load via your back end

  function getData(){
        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();
    //loop through data and add
    for(var i=0;i<data.length;i++){

    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);
    <div id="curve_chart" style="width: 900px; height: 500px"></div>

Your 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("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"));


  echo json_encode($payload);