chrzr chrzr - 2 months ago 12
PHP Question

How to use <?php echo $data; ?> in order to populate a Google chart

I am currently working on a project at university which involves sampling values
(CO2, temperature, humidity ...) to a SQLite3 database with a Raspberry Pi and using a webinterface to show the data.
I'm fairly new to php/html, but I have no problems understanding what the code does.

I already found a german tutorial describing how to create a php/html script which imports the data from the SQLite database and uses Google Graphs in order to display it. I used the provided code as the base for my script.

This is what I have so far:

<?php

require_once("config.php");
require_once("functions.php");
//------------------------ PHP Settings ----------------------------------------
ini_set('track_errors', 1);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set("memory_limit","64M");
ini_set("max_execution_time","30");
@ob_implicit_flush(true);
@ob_end_flush();
$_SELF=$_SERVER['PHP_SELF'];


$SQL="SELECT CO2, Temperature FROM value";

$db = db_con($DBfile);
$q = db_query($SQL);

$data = "var data = new google.visualization.DataTable();<br>"
."data.addColumn('number', 'CO2');<br>"
."data.addColumn('number', 'Temperature');<br><br>"
."data.addRows([<br>";

while ($res = $q->fetch(PDO::FETCH_ASSOC)) {

$temp = (int)$res['Temperature'];
$co2 = (int)$res['CO2'];
$data = $data." [".$temp.", ".$co2."],<br>";
}
$data = $data."]);<br>";

//Print data to check if data from database is loaded
echo $data;

?>

<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></sc$
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
<?php echo $data; ?>

var options = {
title: 'Air Quality',
curveType: 'function',
legend: { position: 'bottom' }
};

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

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="temp_curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>


Now the problem is, that the graph does not show up.

If I add
echo $data;
the content of the variable shows up in the browser, which means that the import part is working, but I just can't get it to display the graph.

var data = new google.visualization.DataTable();
data.addColumn('number', 'CO2');
data.addColumn('number', 'Temperature');

data.addRows([
[23, 500],
[23, 500],
[25, 600],
]);


I suspect it has something to do with the following line of code or with the way the $data variable is set up:

function drawChart() {
<?php echo $data; ?>


If I replace it with code from the example provided by Google, it shows the graph just fine.

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);

var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};


I already spent hours trying to get it work, but I just can't get it right.

Any help/tips would be greatly appreciated!

Thanks in advance!

Answer

I found two things:

first is this line

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></sc$

must be

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

secondly remove all

<br>

in your JavaScript and replace (not necessary, because it is just an visual effect in the source code) with \n\r

like

 $data = "var data = new google.visualization.DataTable();\n\r"
 ."data.addColumn('number', 'CO2');\n\r"
 ."data.addColumn('number', 'Temperature');\n\r\n\r"
 ."data.addRows([\n\r";

 while ($res = $q->fetch(PDO::FETCH_ASSOC)) {

        $temp = (int)$res['Temperature'];
        $co2 = (int)$res['CO2'];
        $data = $data."  [".$temp.", ".$co2."],\n\r";
        }
        $data = $data."]);\n\r";

And you will get a nice looking graph!

Comments