Environment
- Windows 8.1 64bit
- Google Chrome
What I'm trying to do
Ultimate goal
Make a pet monitoring system using Raspberry Pi. Create a webpage where you can check streaming image of a pet and the temperature and humidity.
Current issue
Can't read csv data (temperature and humidity) using PHP and pass it to javascript in a html file.
The following gives me a blank page.
test.html
<?php
$data = array();
$fp = fopen('temphumid.csv', 'r');
$row = fgetcsv($fp); // skip the header
while ($row = fgetcsv($fp)) { $data[] = sprintf("['%d', %d, %d] ", $row[0], $row[1], $row[2]); }
$str = implode(', ' . PHP_EOL, $data);
?>
<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([ ['day', 'avg_temp', 'avg_humid'],
<?php $str; ?>
]);
var options = { title: 'This is a test graph' };
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 80%; height: 400px;"></div>
</body>
</html>
temphumid.csv is in the same directory as test.html.
temphumid.csv
dateandtime,temp,humid
1,20.0701749938488,48.0275514992728
2,20.2401044696121,57.2354245801184
3,19.1474087424506,45.5657495890199
4,18.8319188605772,62.4405658353862
5,20.8854516366497,46.5185590247232
6,20.7459481702926,47.4137986506082
7,20.9609524855751,48.5064890268627
8,17.0936718055156,46.1276393517355
9,18.4273511669417,42.4825830307023
10,20.9669696456074,51.5502032331834
I tried a lot of things including adding echo to php clause, hard-coding a sample array in javascript, etc... in vain.
Changing the line of <?php echo $str; ?> to [0, 5, 4], [1, 9, 10], [2, 20, 23] works fine. So there's something wrong with PHP but I can't figure out what it is.
I also referred to this post. - How to pass variables and data from PHP to JavaScript? But this wasn't helpful.
Also, the javascript console told me the following message.
The console tells me Uncaught SyntaxError: Unexpected token <
How can I solve this issue? Thanks in advance.
update1
I added echo and ran the program in a web server in Raspberry Pi. However, I still see a blank page and Uncaught SyntaxError: Unexpected token < on console.
update2
I changed the extension to php and now it works fine. Thanks, folks!
