Since your two requests for data come back asynchronously, and not
necessarily in the order you expect, you have to do a bit of work to keep
track of when each dataset comes back, and only proceed to draw your diff
chart when both are available. Something like this:
// global vars to keep track of which data has come back.
var oldData = null;
var newData = null;
google.charts.setOnLoadCallback(drawChartoriginal);
google.charts.setOnLoadCallback(drawChartnew);
function drawChartOriginal() {
...
oldData = dataoriginal;
if (newData) drawChartDiff();
}
function drawChartNew() {
...
newData = datanew;
if (oldData) drawChartDiff();
}
On Tue, Nov 21, 2017 at 1:54 PM, Uwe Dornbusch <[email protected]>
wrote:
> I have successfully created a diff scatter chart following the examples in
> the guides from data which is hardcoded into the function (as in the google
> guides). However, replacing the data with calls to google sheets will only
> draw the two data charts but not the diff chart.
> The code is below (apologies, i am not a programmer so this might be a bit
> more messy than usual) and the sheets is open to test.I have tried it with
> separate draw functions (some of the commented out lines) or with all in
> one function which does not make a difference in the hardcoded data but
> also has not impact here.
>
> I am wondering what i have missed or whether diff charts simply do not
> work with external data sources.
>
> Many thanks, Uwe
>
> <html>
> <head>
> <!--Load the AJAX API-->
> <script type="text/javascript" src="https://www.gstatic.com/
> charts/loader.js"></script>
> <script type="text/javascript">
>
> //This is written in 'classic' style as most options are not yet
> implemented in the 'material' style
> //Load the Visualization API and the corechart package.
> google.charts.load('current', {'packages':['corechart', 'table'],
> 'language': 'de'});// the language setting to DE is a simple way to get at
> 24 hour time format for the x axis :-)
> // Set a callback to run when the Google Visualization API is
> loaded.
> google.charts.setOnLoadCallback(drawChartoriginal);
> //google.charts.setOnLoadCallback(drawChartnew);
> //google.charts.setOnLoadCallback(drawChartDiff);
>
> function drawChartoriginal() {
> //the next line is the link to the Google Sheets which is the following
> URL and which needs to be subtly changed
> //in the format at the end of the link: https://docs.google.com/
> spreadsheets/d/1xzoNFEuwHilog2zNjuKuilUXbHKCFWNHGZsS2zwEojs/edit#gid=
> 678810481.
> var queryoriginal = new google.visualization.Query('ht
> tp://docs.google.com/spreadsheet/tq?key=135RNRlBakQ5aXqsABZpmLE9dVWjt9
> tZiWdCwD3e9RS4&gid=161902447');
> queryoriginal.setQuery('SELECT A, B');//this selects the columns from
> the spreadsheet
> queryoriginal.send(function (responseoriginal) {
> if (responseoriginal.isError()) {
> alert('Error in query: ' + responseoriginal.getMessage() + ' '
> + responseoriginal.getDetailedMessage());
> return;
> }
> var dataoriginal = responseoriginal.getDataTable();
> var chartoriginal = new google.visualization.
> ScatterChart(document.getElementById('chartoriginal_div'));
> chartoriginal.draw(dataoriginal);
> });
>
> //function drawChartnew() {
> var querynew = new google.visualization.Query('ht
> tp://docs.google.com/spreadsheet/tq?key=135RNRlBakQ5aXqsABZpmLE9dVWjt9
> tZiWdCwD3e9RS4&gid=161902447');
> querynew.setQuery('SELECT A, C');//this selects the columns from the
> spreadsheet
> querynew.send(function (responsenew) {
> if (responsenew.isError()) {
> alert('Error in query: ' + responsenew.getMessage() + ' ' +
> responsenew.getDetailedMessage());
> return;
> }
>
> var datanew = responsenew.getDataTable();
> var chartnew = new google.visualization.ScatterChart(document.
> getElementById('chartnew_div'));
>
> chartnew.draw(datanew);
> });
>
>
>
> //function drawChartDiff() {
> var chartDiff = new google.visualization.ScatterChart(document.
> getElementById('chartdiff_div'));
> var diffData = chartDiff.computeDiff(dataoriginal, datanew);
> chartDiff.draw(diffData);
> //};
> };
> </script>
> </head>
> <body>
> <!--Div that will hold the pie chart-->
>
> <div id="chartoriginal_div"></div>
>
> Data:
> <div id="chartnew_div"></div>
> differencegraph
> <div id="chartdiff_div"></div>
>
> </body>
> </html>
>
>
> --
> 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 [email protected].
> To post to this group, send email to google-visualization-api@
> 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/4cca24e9-0c85-461a-b260-
> ab61cdc65df8%40googlegroups.com
> <https://groups.google.com/d/msgid/google-visualization-api/4cca24e9-0c85-461a-b260-ab61cdc65df8%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
[email protected] <[email protected]> 5CC, Cambridge MA
--
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 [email protected].
To post to this group, send email to [email protected].
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/CAOtcSJODTrBH0XCqCv-gty19y5tKUmsoTgkrJqT_vvAUtfvoiQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
