3
        <?php
        $con=mysql_connect("xxxx.xxxx.xxxx.xx","Myuser","Mypass") or die("Failed to connect with database!!!!");
        mysql_select_db("data", $con); 

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

        $data = array (
      'cols' => array( 
        array('id' => 'date', 'label' => 'Date ', 'type' => 'datetime'), 
        array('id' => 'temp1', 'label' => 'Temp 1', 'type' => 'number'), 
        array('id' => 'temp2', 'label' => 'Temp 2', 'type' => 'number')
    ),
    'rows' => array()
);

while ($res = mysql_fetch_assoc($sth))
    // array nesting is complex owing to to google charts api
    array_push($data['rows'], array('c' => array(
        array('v' => $res['date']), 
        array('v' => $res['temp1']), 
        array('v' => $res['temp2'])
    )));
}
?>

<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 bar_chart_data = new google.visualization.DataTable(<?php echo json_encode($data); ?>);
        var options = {
          title: 'Weather data'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(bar_chart_data, options);
      }
    </script>
</head>
            <body>
                <div id="chart_div" style="width: 900px; height: 500px;"></div>
            </body>
        </html>

I am having problem finishing this, echo count($bar_chart_rows_arr) AND echo count($task_submissions_arr) is showing corresponding good results (number of rows in table). The chart frame is showing but there are no table/chart data. Any suggestions ?

output html:

   6060
<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 bar_chart_data = new google.visualization.DataTable(
            {
                cols: [{"id":"date","label":"Date ","type":"datetime"},{"id":"temp1","label":"Temp 1","type":"number"},{"id":"temp2","label":"Temp 2","type":"number"}], 
                rows: [{"c":[{"date":{"id":"1","temp1":"10.75","temp2":"4","date":"2013-10-05 20:41:00"}},{"temp1":{"id":"1","temp1":"10.75","temp2":"4","date":"2013-10-05 20:41:00"}},{"temp2":{"id":"1","temp1":"10.75","temp2":"4","date":"2013-10-05 20:41:00"}}]},{"c":[{"date":{"id":"2","temp1":"9.125","temp2":"4","date":"2013-10-05 22:18:17"}},{"temp1":{"id":"2","temp1":"9.125","temp2":"4","date":"2013-10-05 22:18:17"}},{"temp2":{"id":"2","temp1":"9.125","temp2":"4","date":"2013-10-05 22:18:17"}}]},{"c":[{"date":{"id":"3","temp1":"8.187","temp2":"4","date":"2013-10-05 23:51:20"}},{"temp1":{"id":"3","temp1":"8.187","temp2":"4","date":"2013-10-05 23:51:20"}},{"temp2":{"id":"3","temp1":"8.187","temp2":"4","date":"2013-10-05 23:51:20"}}]},{"c":[{"date":{"id":"4","temp1":"17.187","temp2":"4","date":"2013-10-07 11:39:21"}},{"temp1":{"id":"4","temp1":"17.187","temp2":"4","date":"2013-10-07 11:39:21"}},{"temp2":{"id":"4","temp1":"17.187","temp2":"4","date":"2013-10-07 11:39:21"}}]},{"c":[{"date":{"id":"5","temp1":"17.062","temp2":"4","date":"2013-10-07 12:00:05"}},{"temp1":{"id":"5","temp1":"17.062","temp2":"4","date":"2013-10-07 12:00:05"}},{"temp2":{"id":"5","temp1":"17.062","temp2":"4","date":"2013-10-07 12:00:05"}}]},{"c":[{"date":{"id":"6","temp1":"17.187","temp2":"4","date":"2013-10-07 14:30:04"}},{"temp1":{"id":"6","temp1":"17.187","temp2":"4","date":"2013-10-07 14:30:04"}},{"temp2":{"id":"6","temp1":"17.187","temp2":"4","date":"2013-10-07 14:30:04"}}]},{"c":[{"date":{"id":"7","temp1":"17.25","temp2":"4","date":"2013-10-07 15:00:04"}},{"temp1":{"id":"7","temp1":"17.25","temp2":"4","date":"2013-10-07 15:00:04"}},{"temp2":{"id":"7","temp1":"17.25","temp2":"4","date":"2013-10-07 15:00:04"}}]},{"c":[{"date":{"id":"8","temp1":"17.562","temp2":"4","date":"2013-10-07 15:30:04"}},{"temp1":{"id":"8","temp1":"17.562","temp2":"4","date":"2013-10-07 15:30:04"}},{"temp2":{"id":"8","temp1":"17.562","temp2":"4","date":"2013-10-07 15:30:04"}}]},{"c":[{"date":{"id":"9","temp1":"17.875","temp2":"4","date":"2013-10-07 16:00:04"}},{"temp1":{"id":"9","temp1":"17.875","temp2":"4","date":"2013-10-07 16:00:04"}},{"temp2":{"id":"9","temp1":"17.875","temp2":"4","date":"2013-10-07 16:00:04"}}]},{"c":[{"date":{"id":"10","temp1":"17.875","temp2":"4","date":"2013-10-07 16:30:04"}},{"temp1":{"id":"10","temp1":"17.875","temp2":"4","date":"2013-10-07 16:30:04"}},{"temp2":{"id":"10","temp1":"17.875","temp2":"4","date":"2013-10-07 16:30:04"}}]},{"c":[{"date":{"id":"11","temp1":"17.375","temp2":"4","date":"2013-10-07 17:00:04"}},{"temp1":{"id":"11","temp1":"17.375","temp2":"4","date":"2013-10-07 17:00:04"}},{"temp2":{"id":"11","temp1":"17.375","temp2":"4","date":"2013-10-07 17:00:04"}}]},{"c":[{"date":{"id":"12","temp1":"17.062","temp2":"4","date":"2013-10-07 17:30:04"}},{"temp1":{"id":"12","temp1":"17.062","temp2":"4","date":"2013-10-07 17:30:04"}},{"temp2":{"id":"12","temp1":"17.062","temp2":"4","date":"2013-10-07 17:30:04"}}]},{"c":[{"date":{"id":"13","temp1":"17.062","temp2":"4","date":"2013-10-07 18:00:04"}},{"temp1":{"id":"13","temp1":"17.062","temp2":"4","date":"2013-10-07 18:00:04"}},{"temp2":{"id":"13","temp1":"17.062","temp2":"4","date":"2013-10-07 18:00:04"}}]},{"c":[{"date":{"id":"14","temp1":"16.187","temp2":"4","date":"2013-10-07 18:30:04"}},{"temp1":{"id":"14","temp1":"16.187","temp2":"4","date":"2013-10-07 18:30:04"}},{"temp2":{"id":"14","temp1":"16.187","temp2":"4","date":"2013-10-07 18:30:04"}}]},{"c":[{"date":{"id":"15","temp1":"15.875","temp2":"4","date":"2013-10-07 19:00:03"}},{"temp1":{"id":"15","temp1":"15.875","temp2":"4","date":"2013-10-07 19:00:03"}},{"temp2":{"id":"15","temp1":"15.875","temp2":"4","date":"2013-10-07 19:00:03"}}]},{"c":[{"date":{"id":"16","temp1":"15.625","temp2":"4","date":"2013-10-07 19:30:03"}},{"temp1":{"id":"16","temp1":"15.625","temp2":"4","date":"2013-10-07 19:30:03"}},{"temp2":{"id":"16","temp1":"15.625","temp2":"4","date":"2013-10-07 19:30:03"}}]},{"c":[{"date":{"id":"17","temp1":"15.437","temp2":"4","date":"2013-10-07 20:00:05"}},{"temp1":{"id":"17","temp1":"15.437","temp2":"4","date":"2013-10-07 20:00:05"}},{"temp2":{"id":"17","temp1":"15.437","temp2":"4","date":"2013-10-07 20:00:05"}}]},{"c":[{"date":{"id":"18","temp1":"15.375","temp2":"4","date":"2013-10-07 20:30:03"}},{"temp1":{"id":"18","temp1":"15.375","temp2":"4","date":"2013-10-07 20:30:03"}},{"temp2":{"id":"18","temp1":"15.375","temp2":"4","date":"2013-10-07 20:30:03"}}]},{"c":[{"date":{"id":"19","temp1":"15.312","temp2":"4","date":"2013-10-07 21:00:04"}},{"temp1":{"id":"19","temp1":"15.312","temp2":"4","date":"2013-10-07 21:00:04"}},{"temp2":{"id":"19","temp1":"15.312","temp2":"4","date":"2013-10-07 21:00:04"}}]},{"c":[{"date":{"id":"20","temp1":"15.312","temp2":"4","date":"2013-10-07 21:30:04"}},{"temp1":{"id":"20","temp1":"15.312","temp2":"4","date":"2013-10-07 21:30:04"}},{"temp2":{"id":"20","temp1":"15.312","temp2":"4","date":"2013-10-07 21:30:04"}}]},{"c":[{"date":{"id":"21","temp1":"15.312","temp2":"4","date":"2013-10-07 22:00:04"}},{"temp1":{"id":"21","temp1":"15.312","temp2":"4","date":"2013-10-07 22:00:04"}},{"temp2":{"id":"21","temp1":"15.312","temp2":"4","date":"2013-10-07 22:00:04"}}]},{"c":[{"date":{"id":"22","temp1":"15.25","temp2":"15.25","date":"2013-10-07 22:20:00"}},{"temp1":{"id":"22","temp1":"15.25","temp2":"15.25","date":"2013-10-07 22:20:00"}},{"temp2":{"id":"22","temp1":"15.25","temp2":"15.25","date":"2013-10-07 22:20:00"}}]},{"c":[{"date":{"id":"23","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:21:40"}},{"temp1":{"id":"23","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:21:40"}},{"temp2":{"id":"23","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:21:40"}}]},{"c":[{"date":{"id":"24","temp1":"15.25","temp2":"15.187","date":"2013-10-07 22:22:25"}},{"temp1":{"id":"24","temp1":"15.25","temp2":"15.187","date":"2013-10-07 22:22:25"}},{"temp2":{"id":"24","temp1":"15.25","temp2":"15.187","date":"2013-10-07 22:22:25"}}]},{"c":[{"date":{"id":"25","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:30:06"}},{"temp1":{"id":"25","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:30:06"}},{"temp2":{"id":"25","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:30:06"}}]},{"c":[{"date":{"id":"26","temp1":"15.312","temp2":"15.312","date":"2013-10-07 22:53:33"}},{"temp1":{"id":"26","temp1":"15.312","temp2":"15.312","date":"2013-10-07 22:53:33"}},{"temp2":{"id":"26","temp1":"15.312","temp2":"15.312","date":"2013-10-07 22:53:33"}}]},{"c":[{"date":{"id":"27","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:53:45"}},{"temp1":{"id":"27","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:53:45"}},{"temp2":{"id":"27","temp1":"15.312","temp2":"15.25","date":"2013-10-07 22:53:45"}}]},{"c":[{"date":{"id":"28","temp1":"15.375","temp2":"15.312","date":"2013-10-07 23:00:05"}},{"temp1":{"id":"28","temp1":"15.375","temp2":"15.312","date":"2013-10-07 23:00:05"}},{"temp2":{"id":"28","temp1":"15.375","temp2":"15.312","date":"2013-10-07 23:00:05"}}]},{"c":[{"date":{"id":"29","temp1":"14.937","temp2":"15.25","date":"2013-10-07 23:01:04"}},{"temp1":{"id":"29","temp1":"14.937","temp2":"15.25","date":"2013-10-07 23:01:04"}},{"temp2":{"id":"29","temp1":"14.937","temp2":"15.25","date":"2013-10-07 23:01:04"}}]},{"c":[{"date":{"id":"30","temp1":"14.937","temp2":"15.25","date":"2013-10-07 23:01:11"}},{"temp1":{"id":"30","temp1":"14.937","temp2":"15.25","date":"2013-10-07 23:01:11"}},{"temp2":{"id":"30","temp1":"14.937","temp2":"15.25","date":"2013-10-07 23:01:11"}}]},{"c":[{"date":{"id":"31","temp1":"14.875","temp2":"15.312","date":"2013-10-07 23:01:16"}},{"temp1":{"id":"31","temp1":"14.875","temp2":"15.312","date":"2013-10-07 23:01:16"}},{"temp2":{"id":"31","temp1":"14.875","temp2":"15.312","date":"2013-10-07 23:01:16"}}]},{"c":[{"date":{"id":"32","temp1":"14.812","temp2":"15.312","date":"2013-10-07 23:01:21"}},{"temp1":{"id":"32","temp1":"14.812","temp2":"15.312","date":"2013-10-07 23:01:21"}},{"temp2":{"id":"32","temp1":"14.812","temp2":"15.312","date":"2013-10-07 23:01:21"}}]},{"c":[{"date":{"id":"33","temp1":"14.75","temp2":"15.25","date":"2013-10-07 23:01:38"}},{"temp1":{"id":"33","temp1":"14.75","temp2":"15.25","date":"2013-10-07 23:01:38"}},{"temp2":{"id":"33","temp1":"14.75","temp2":"15.25","date":"2013-10-07 23:01:38"}}]},{"c":[{"date":{"id":"34","temp1":"14.75","temp2":"15.25","date":"2013-10-07 23:03:29"}},{"temp1":{"id":"34","temp1":"14.75","temp2":"15.25","date":"2013-10-07 23:03:29"}},{"temp2":{"id":"34","temp1":"14.75","temp2":"15.25","date":"2013-10-07 23:03:29"}}]},{"c":[{"date":{"id":"35","temp1":"14.375","temp2":"15.25","date":"2013-10-07 23:03:37"}},{"temp1":{"id":"35","temp1":"14.375","temp2":"15.25","date":"2013-10-07 23:03:37"}},{"temp2":{"id":"35","temp1":"14.375","temp2":"15.25","date":"2013-10-07 23:03:37"}}]},{"c":[{"date":{"id":"36","temp1":"14.375","temp2":"15.312","date":"2013-10-07 23:04:15"}},{"temp1":{"id":"36","temp1":"14.375","temp2":"15.312","date":"2013-10-07 23:04:15"}},{"temp2":{"id":"36","temp1":"14.375","temp2":"15.312","date":"2013-10-07 23:04:15"}}]},{"c":[{"date":{"id":"37","temp1":"14.25","temp2":"15.25","date":"2013-10-07 23:09:53"}},{"temp1":{"id":"37","temp1":"14.25","temp2":"15.25","date":"2013-10-07 23:09:53"}},{"temp2":{"id":"37","temp1":"14.25","temp2":"15.25","date":"2013-10-07 23:09:53"}}]},{"c":[{"date":{"id":"38","temp1":"14.187","temp2":"15.187","date":"2013-10-07 23:19:44"}},{"temp1":{"id":"38","temp1":"14.187","temp2":"15.187","date":"2013-10-07 23:19:44"}},{"temp2":{"id":"38","temp1":"14.187","temp2":"15.187","date":"2013-10-07 23:19:44"}}]},{"c":[{"date":{"id":"39","temp1":"14.125","temp2":"15.125","date":"2013-10-07 23:30:05"}},{"temp1":{"id":"39","temp1":"14.125","temp2":"15.125","date":"2013-10-07 23:30:05"}},{"temp2":{"id":"39","temp1":"14.125","temp2":"15.125","date":"2013-10-07 23:30:05"}}]},{"c":[{"date":{"id":"40","temp1":"14.125","temp2":"15","date":"2013-10-08 00:00:06"}},{"temp1":{"id":"40","temp1":"14.125","temp2":"15","date":"2013-10-08 00:00:06"}},{"temp2":{"id":"40","temp1":"14.125","temp2":"15","date":"2013-10-08 00:00:06"}}]},{"c":[{"date":{"id":"41","temp1":"13.875","temp2":"14.937","date":"2013-10-08 00:30:05"}},{"temp1":{"id":"41","temp1":"13.875","temp2":"14.937","date":"2013-10-08 00:30:05"}},{"temp2":{"id":"41","temp1":"13.875","temp2":"14.937","date":"2013-10-08 00:30:05"}}]},{"c":[{"date":{"id":"42","temp1":"13.75","temp2":"14.937","date":"2013-10-08 01:00:05"}},{"temp1":{"id":"42","temp1":"13.75","temp2":"14.937","date":"2013-10-08 01:00:05"}},{"temp2":{"id":"42","temp1":"13.75","temp2":"14.937","date":"2013-10-08 01:00:05"}}]},{"c":[{"date":{"id":"43","temp1":"13.812","temp2":"14.75","date":"2013-10-08 01:30:06"}},{"temp1":{"id":"43","temp1":"13.812","temp2":"14.75","date":"2013-10-08 01:30:06"}},{"temp2":{"id":"43","temp1":"13.812","temp2":"14.75","date":"2013-10-08 01:30:06"}}]},{"c":[{"date":{"id":"44","temp1":"13.937","temp2":"14.625","date":"2013-10-08 02:00:06"}},{"temp1":{"id":"44","temp1":"13.937","temp2":"14.625","date":"2013-10-08 02:00:06"}},{"temp2":{"id":"44","temp1":"13.937","temp2":"14.625","date":"2013-10-08 02:00:06"}}]},{"c":[{"date":{"id":"45","temp1":"14","temp2":"14.625","date":"2013-10-08 02:30:05"}},{"temp1":{"id":"45","temp1":"14","temp2":"14.625","date":"2013-10-08 02:30:05"}},{"temp2":{"id":"45","temp1":"14","temp2":"14.625","date":"2013-10-08 02:30:05"}}]},{"c":[{"date":{"id":"46","temp1":"14.062","temp2":"14.812","date":"2013-10-08 03:00:06"}},{"temp1":{"id":"46","temp1":"14.062","temp2":"14.812","date":"2013-10-08 03:00:06"}},{"temp2":{"id":"46","temp1":"14.062","temp2":"14.812","date":"2013-10-08 03:00:06"}}]},{"c":[{"date":{"id":"47","temp1":"14.062","temp2":"14.937","date":"2013-10-08 03:30:05"}},{"temp1":{"id":"47","temp1":"14.062","temp2":"14.937","date":"2013-10-08 03:30:05"}},{"temp2":{"id":"47","temp1":"14.062","temp2":"14.937","date":"2013-10-08 03:30:05"}}]},{"c":[{"date":{"id":"48","temp1":"13.937","temp2":"14.875","date":"2013-10-08 04:00:06"}},{"temp1":{"id":"48","temp1":"13.937","temp2":"14.875","date":"2013-10-08 04:00:06"}},{"temp2":{"id":"48","temp1":"13.937","temp2":"14.875","date":"2013-10-08 04:00:06"}}]},{"c":[{"date":{"id":"49","temp1":"14","temp2":"14.812","date":"2013-10-08 04:30:05"}},{"temp1":{"id":"49","temp1":"14","temp2":"14.812","date":"2013-10-08 04:30:05"}},{"temp2":{"id":"49","temp1":"14","temp2":"14.812","date":"2013-10-08 04:30:05"}}]},{"c":[{"date":{"id":"50","temp1":"13.625","temp2":"14.75","date":"2013-10-08 05:00:06"}},{"temp1":{"id":"50","temp1":"13.625","temp2":"14.75","date":"2013-10-08 05:00:06"}},{"temp2":{"id":"50","temp1":"13.625","temp2":"14.75","date":"2013-10-08 05:00:06"}}]},{"c":[{"date":{"id":"51","temp1":"13.375","temp2":"14.687","date":"2013-10-08 03:30:06"}},{"temp1":{"id":"51","temp1":"13.375","temp2":"14.687","date":"2013-10-08 03:30:06"}},{"temp2":{"id":"51","temp1":"13.375","temp2":"14.687","date":"2013-10-08 03:30:06"}}]},{"c":[{"date":{"id":"52","temp1":"13.562","temp2":"14.562","date":"2013-10-08 04:00:06"}},{"temp1":{"id":"52","temp1":"13.562","temp2":"14.562","date":"2013-10-08 04:00:06"}},{"temp2":{"id":"52","temp1":"13.562","temp2":"14.562","date":"2013-10-08 04:00:06"}}]},{"c":[{"date":{"id":"53","temp1":"13.687","temp2":"14.312","date":"2013-10-08 04:30:05"}},{"temp1":{"id":"53","temp1":"13.687","temp2":"14.312","date":"2013-10-08 04:30:05"}},{"temp2":{"id":"53","temp1":"13.687","temp2":"14.312","date":"2013-10-08 04:30:05"}}]},{"c":[{"date":{"id":"54","temp1":"14","temp2":"14.375","date":"2013-10-08 05:00:05"}},{"temp1":{"id":"54","temp1":"14","temp2":"14.375","date":"2013-10-08 05:00:05"}},{"temp2":{"id":"54","temp1":"14","temp2":"14.375","date":"2013-10-08 05:00:05"}}]},{"c":[{"date":{"id":"55","temp1":"13.875","temp2":"14.5","date":"2013-10-08 05:30:05"}},{"temp1":{"id":"55","temp1":"13.875","temp2":"14.5","date":"2013-10-08 05:30:05"}},{"temp2":{"id":"55","temp1":"13.875","temp2":"14.5","date":"2013-10-08 05:30:05"}}]},{"c":[{"date":{"id":"56","temp1":"13.75","temp2":"14.5","date":"2013-10-08 06:00:06"}},{"temp1":{"id":"56","temp1":"13.75","temp2":"14.5","date":"2013-10-08 06:00:06"}},{"temp2":{"id":"56","temp1":"13.75","temp2":"14.5","date":"2013-10-08 06:00:06"}}]},{"c":[{"date":{"id":"57","temp1":"13.812","temp2":"14.5","date":"2013-10-08 06:30:05"}},{"temp1":{"id":"57","temp1":"13.812","temp2":"14.5","date":"2013-10-08 06:30:05"}},{"temp2":{"id":"57","temp1":"13.812","temp2":"14.5","date":"2013-10-08 06:30:05"}}]},{"c":[{"date":{"id":"58","temp1":"14.125","temp2":"14.562","date":"2013-10-08 07:00:05"}},{"temp1":{"id":"58","temp1":"14.125","temp2":"14.562","date":"2013-10-08 07:00:05"}},{"temp2":{"id":"58","temp1":"14.125","temp2":"14.562","date":"2013-10-08 07:00:05"}}]},{"c":[{"date":{"id":"59","temp1":"14.937","temp2":"14.625","date":"2013-10-08 07:30:05"}},{"temp1":{"id":"59","temp1":"14.937","temp2":"14.625","date":"2013-10-08 07:30:05"}},{"temp2":{"id":"59","temp1":"14.937","temp2":"14.625","date":"2013-10-08 07:30:05"}}]},{"c":[{"date":{"id":"60","temp1":"15.812","temp2":"15.937","date":"2013-10-08 14:34:40"}},{"temp1":{"id":"60","temp1":"15.812","temp2":"15.937","date":"2013-10-08 14:34:40"}},{"temp2":{"id":"60","temp1":"15.812","temp2":"15.937","date":"2013-10-08 14:34:40"}}]}]            });
        var options = {
          title: 'Weather data'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(bar_chart_data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Lars
  • 81
  • 2
  • 10
  • What's the JSON output of `$bar_chart_cols_arr` and `$bar_chart_rows_arr` - do they correspond correctly with what Google Line Chart is expecting? [Google Line Chart Docs](https://developers.google.com/chart/interactive/docs/gallery/linechart#Example) – Aidan Oct 07 '13 at 19:53
  • Can you post the javascript instead of the mystery PHP array? – Sébastien Oct 07 '13 at 20:09
  • We need to see what the contents of the json encoded arrays is, but I suspect your problem is that you are outputting the dates directly from the database without transforming them into the appropriate format. – asgallant Oct 07 '13 at 20:26
  • updated, temp1 & temp2 are FLOAT in the mysql table, and date are timestamp. I will attach more information if anything is missing? – Lars Oct 07 '13 at 22:31
  • 1
    Look at the json output for your row - it's all 'null' hence why no graph is being drawn. Remove the extra `[]` in `$task_submissions_arr[][] = $res;`. – Aidan Oct 08 '13 at 15:30
  • okei removed the extra [] Now it's progress! Now I am getting 'undefined' is not a function (evaluating 'b[va]()')× I have updated the code and the data is now visible – Lars Oct 08 '13 at 22:05
  • if I change it to this: array_push($bar_chart_rows_arr, array('c' => array( array('date' => $task_submissions_arr[$i]['date']), array('temp1' => $task_submissions_arr[$i]['temp1']), array('temp2' => $task_submissions_arr[$i]['temp2']))) ); I get rit of the fault, but there is stil noe lines only the chart frame window – Lars Oct 08 '13 at 22:21
  • 'date', 'temp2', 'temp3' aren't the values expected by Google... Just removing the `[]` should have solved it - where were you getting the error/what was the error in full? – Aidan Oct 10 '13 at 12:44
  • removed the ['date'] ['temp1'] & ['temp2'] still the same result, (chart frame with no data) – Lars Oct 12 '13 at 21:27
  • the text above is updated with the code after tips from @Aidan: "Remove the extra [] in $task_submissions_arr[][] = $res;" AND "date', 'temp2', 'temp3' aren't the values expected by Google... Just removing the [] should have solved it " STILL NO GRAPH – Lars Oct 12 '13 at 21:42

3 Answers3

2

Your PHP code is producing JSON in an incorrect format for the Google Visualization API. Try this instead:

<?php
$con=mysql_connect("xxxx.xxxx.xxxx.xx","Myuser","Mypass") or die("Failed to connect with database!!!!");
mysql_select_db("data", $con); 

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

$data = array (
    'cols' => array( 
        array('id' => 'date', 'label' => 'Date ', 'type' => 'datetime'), 
        array('id' => 'temp1', 'label' => 'Temp 1', 'type' => 'number'), 
        array('id' => 'temp2', 'label' => 'Temp 2', 'type' => 'number')
    ),
    'rows' => array()
);

while ($res = mysql_fetch_assoc($sth))
    // array nesting is complex owing to to google charts api
    array_push($data['rows'], array('c' => array(
        array('v' => $res['date']), 
        array('v' => $res['temp1']), 
        array('v' => $res['temp2'])
    )));
}
?>

and then in your javascript:

var bar_chart_data = new google.visualization.DataTable(<?php echo json_encode($data); ?>);
asgallant
  • 26,060
  • 6
  • 72
  • 87
  • Okei, updated the text up^ with your code, now there is nothing to bee shown not even the chart frame, what am I doing wrong ? – Lars Oct 13 '13 at 16:22
  • Can you update the output HTML so I can see what might be the cause? – asgallant Oct 13 '13 at 16:26
  • It's probably this line: `'cols' ==> array(` - the `==>` should be `=>` – asgallant Oct 13 '13 at 23:53
  • I noticed another thing I left out: the `echo` from the line `var bar_chart_data = new google.visualization.DataTable();`. That would prevent the chart from receiving any data if the PHP code is otherwise correct. If that doesn't fix the problem, you will need to do some debugging on the PHP to figure out where it is throwing an error (your server logs might contain some hints, but PHP is notoriously bad about throwing vague errors that are triggered far from the site of the actual problem in the code). – asgallant Oct 14 '13 at 13:12
0

From the code you've originally posted - change

$task_submissions_arr[][] = $res;

to

$task_submissions_arr[] = $res;
Aidan
  • 109
  • 5
  • please read the comments, this answer has already been proposed and it was not the solution. – Lars Oct 12 '13 at 21:25
  • You'll notice I wrote "from the code you've originally posted" - that is [this code](http://stackoverflow.com/revisions/19232898/1). Never the less, @asgallant answer works as well. – Aidan Oct 13 '13 at 07:48
0

Thanks for all your help in the design, I had several mistakes but the crucial mistake was that I used the wrong format for date, datetime from MySQL database, when I changed it from date / datetime to string the code was complete!

$table['cols']=array(
        array('label' => 'Date', type=>'string'),
        array('label' => 'Temp 1', type=>'number'),
        array('label' =>'Temp 2', type=>'number'),
);

Jason result:

new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"Temp 1","type":"number"},{"label":"Temp 2","type":"number"}],"rows":[{"c":[{"v":"2013-10-05 20:41:00"},{"v":10.75},{"v":4}]}
Lars
  • 81
  • 2
  • 10