My first post - please go easy on me -
I just had solar panels installed on my roof.
I can access data on the amounts of energy being produced and consumed at any given time via a text file. Fine for me, not easy for the other people in my house.
I want to have a web interface (served via a Raspberry Pi server inside my house) that can instantly tell me/us if energy is available to turn on (e.g.) a heater or air conditioner.
The code below is a hybrid of several examples. It works but only once.
My issue is that when the CSV file is updated and I refresh the web interface to see the updated data, only the original data can be seen.
If I open a new incognito window in Chrome and view the web interface from there, I get the most recent data from the CSV, but only once (refresh behaves the same way as in the normal browser window).
Mozilla has the same behavior.
I'm from the C era and still getting my head around this newfangled world of objects in C++ and Java so the answer may be obvious, but why doesn't my data refresh? Even if I close down the browser and restart it, the original data is seen.
I've seen a few recommendations in the forums that the data (which is incidentally the variable name 'data' I'm using too) has to be reset. Why? Doesn't the re-read of the CSV file do that automatically? How do I do it otherwise?
Thank you for your kind help and advice.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> // load the visualisation API
google.load('visualization', '1', { packages: ['controls'] });
//google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function drawVisualization() {
$.get("ifr.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
title: 'Solar',
width: 900, height: 320,
titleTextStyle : {color: 'grey', fontSize: 11},
}
});
crt_ertdlyYY.draw();
});
}
google.setOnLoadCallback(drawVisualization)
</script>
</head>
<body>
<div id="crt_ertdlyYY" style="width: 640px; height: 480px;"></div>
</body>
</html>
Example CSV:
'Task','Hours per Day'
'Work',11
'Eat',2
'Commute',2
'Watch TV',2
'Sleep',7