benedikt.r benedikt.r -4 years ago 245
Javascript Question

Google Charts - Table has no columns

I am stuck with Google Charts.

The linegraph displays two values: Tempeture and Humidity.

Since I added Ajax to my Chart It doesn't load anymore and I get the Message:" Table has no columns."

Here is my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var jsonData = <?php echo json_encode($table); ?>;
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
setInterval(drawChart, 10000);
function drawChart() {
$.ajax({
url: 'getTemp.php',
type: 'get',
success: function (json) {
var data = new google.visualization.DataTable(json);
var options = {
title: 'Raspberry:',
curveType: 'function',
'height':400
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});
};
</script>


Edit: This is my php-file: getTemp.php , if you need anything else let me know. thanks

$conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


try {
$result = $conn->query('SELECT *
FROM Device_Data ');

$rows = array();
$table = array();
$table['cols'] = array(array('label' => 'Timestamp', 'type' => 'string'),array('label' => 'Temperature', 'type' => 'number'),array('label' => 'Humidity', 'type' => 'number'));

foreach($result as $r) {

$data = array();
$data[] = array('v' => (string) $r['Timestamp']);
$data[] = array('v' => (int) $r['Temperature']);
$data[] = array('v' => (int) $r['Humidity']);

$rows[] = array('c' => $data);

}

$table['rows'] = $rows;

} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}

try {
$result2 = $conn->prepare("SELECT 'Temperature','Humidity', 'Timestamp' from Device_Data;");

$result2->execute();

} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}

?>

Answer Source

Edit / Second Attempt:

I think the variable is out of scope.

Please apply <?php echo json_encode($table); ?> directly.

So that it looks like:

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

Then you can remove the old var jsonData ... part, and delete all instances of json in the success function.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download