Here is a working example starting from your code: https://jsfiddle.net/eb8c1vcb/
* You were calling the drawChartDiff function from the top level again. It is necessary to wait until both the oldData and newData are available. * You lost the drawChartnew function. * Your diff chart needed to reference the oldData and newData in the global vars. On Wed, Nov 22, 2017 at 7:01 AM, Uwe Dornbusch <[email protected]> wrote: > Apologies again for the code - this started out just modifying something > copied and pasted and I didn't think this would be a bit longer drawn out > :-) > Below the code which I think addresses your point, ie > "newData = datanew; > if (oldData) drawChartDiff();" > now sits above the chartnew.draw(newData) / the > chartoriginal.draw(oldData). > The result is curious in that it takes now about 5 seconds but then only > draws the second graph.? > Thanks again, 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 :-) > //DanielLaLiberte > > // global vars to keep track of which data has come back. > var oldData = null; > var newData = null; > //DanielLaLiberte > // 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')); > //DanielLaLiberte > oldData = dataoriginal; > if (newData) drawChartDiff(); > //DanielLaLiberte > chartoriginal.draw(oldData); > }); > > var querynew = new google.visualization.Query('http://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')); > //DanielLaLiberte > newData = datanew; > if (oldData) drawChartDiff(); > //DanielLaLiberte > chartnew.draw(newData); > }); > }; > > 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 charts--> > Old data plot > <div id="chartoriginal_div"></div> > New 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/82eb0869-bf65-4b42-8208- > 0e4c813c935c%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/82eb0869-bf65-4b42-8208-0e4c813c935c%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/CAOtcSJPMLk2J_oc813Exzy3EzRvpijNK7_3n_ZtNKBDA%2BgZ1Jg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
