Refreshing a google visualization chart using CSV

54 views
Skip to first unread message

gilda

unread,
Jan 6, 2019, 2:03:01 AM1/6/19
to Google Visualization API
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

Daniel LaLiberte

unread,
Jan 7, 2019, 10:08:59 AM1/7/19
to Google Visualization API
This sounds like a browser caching issue, since you say that even restarting your browser results in the same original data being used.  To prove it is browser caching, flush your browser cache and try again.  If so, check your browser cache settings to make sure you are at least observing the declared time-to-live of the data that the server should be providing.  Then check what your server is telling the browser.  You can do most of this debugging in your browser.  E.g. look in the network tab in the Chrome developer tools, if that is your browser.

Also, by the way, you should switch to using the latest version of Google Charts.  See   https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/25434092-a46b-45ea-961c-765110c0644e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Reply all
Reply to author
Forward
0 new messages