Google chart from phpmyadmin database

Question

I am working on my project trying to make a line chart, I have made a simple linechart by putting the values inside the code but now trying to fetch data from phpmyadmin.

I think the fault is in the ecoding to json.

html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Time',  'PH', 'Chlorine'],
          ['8',      7,     6.5],
          ['9',      7.2,   4.3],
          ['10',     7.5,   3.2],
          ['11',     8.5,   2.4]
        ]);

        var options = {
          title: 'Measurement'


        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The output looks like this:

enter image description here

I followed this guide: PHP MySQL Google Chart JSON - Complete Example but that made a pie chart, and I am trying to make a line chart out of three variables: time, PH and Chlorine.

This is how far I have came and still not working:

<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
mysql_select_db("chart", $con);

$sth = mysql_query("SELECT * FROM googlechart");

$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(


    array('label' => 'Time',    'type' => 'number'),
    array('label' => 'PH',      'type' => 'number'),
    array('label' => 'Chlorine','type' => 'number') );

    $rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $temp = array();

    $temp[] = array('v' => (string) $r['Time']); 
    $temp[] = array('v' => (string) $r['PH']);
    $temp[] = array('v' => (string) $r['Chlorine']);    


    $temp[] = array('v' => (int) $r['Time']); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;




?>


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.DataTable(<?=$jsonTable?>);

        var options = {
          title: 'Measurement'


        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Hope someone can show me what I am doing wrong and give me a hand. Thank you!

Can someone please help! – user3185936 Mar 14 '14 at 10:59 — user3185936, Mar 14 '14 at 10:59

score 0 · Answer 1 · answered Mar 14 '14 at 15:38

You need to put that data into the DataTable. There are two primary ways you can do this. First, you can include the PHP code in the file with the chart, and echo $jsonTable directly into the DataTable constructor:

var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

Alternatively, you can put the PHP code into its own page (and uncomment the echo $jsonTable line), and use an AJAX request to get the data. Here's an example using jQuery to handle the AJAX request:

function drawChart() {
    $.ajax({
        url: 'path/to/data/source.php',
        type: 'json',
        success: function (json) {
            var data = new google.visualization.DataTable(json);

            var options = {
                title: 'Measurement'
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    });
}

score 0 · Answer 2 · answered Mar 21 '18 at 16:20

Your function chartDraw must be look like this:

var data = null;
        data = new google.visualization.DataTable();

        data.addColumn('number', 'NameAxis');
        data.addColumn('number', 'NameAxis');
        var total = [];
        for (var i = res.length - 1; i >= 0; i--) {
            total.push([time[i] ,valuePH[i] , valueCl[i] ]);
        }
        data.addRows(total);

        var options = {
            hAxis: {
                title: 'NameHAxis',
            vAxis: {
                title: 'NamevAxis'
                },
                backgroundColor: '#ffffff', //fondo de la grafica
                width: 700,
                height: 400,
                title: 'Measurement',

            };
        var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
        chart.draw(data, options);
        }

Google chart from phpmyadmin database

2 Answers2