Hi Sergey, Thanks for your reply. I tried using the join method. And it works. But since the date in the frist query is not the same as in the second query it doesn't display the areachart like I want it to. Is there any way I could change this? What I want is to compare today's transactions to the transactions 364 days ago.
What I've got: <http://s11.postimg.org/4jb4kqsb7/chart1.png> What I want: <http://s17.postimg.org/5f3vqas3j/chart2.png> My code: > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > <html> > > <head> > > <meta http-equiv="content-type" content="text/html; charset=UTF-8"> > > <title>test_join</title> > > </title> > > <script type="text/javascript" src="//www.google.com/jsapi"></script> > > <script type="text/javascript"> > > function drawChart() { > > // create an array containing one false for each query > > var ready = [false, false]; > > // create an array to hold the DataTables > > var dataArray = []; > > function handleQueryResponse(response, index) { > > if (response.isError()) { > > alert('Error in query ' + index + ': ' + response.getMessage() >> + ' ' + response.getDetailedMessage()); > > return; > > } > > ready[index] = true; > > dataArray[index] = response.getDataTable(); > > var allReady = true; > > // check if all the queries have returned > > for (var i = 0; i < ready.length; i++) { > > if (!ready[i]) { > > allReady = false; > > break; > > } > > } > > // if all the queries have returned, draw the charts and tables > > if (allReady) { > > var options = { > > title: 'test', > > legend: {position: 'bottom'}, > > interpolateNulls: true, > > hAxis: { > > title: 'Date', > > titleTextStyle: { > > color: 'red' > > }, > > }, > > >> }; > > var edata = data = new >> google.visualization.data.join(dataArray[0], dataArray[1], 'full', [[0, >> 0]], [1], [1]); > > var tables = []; > > tables[0] = new >> google.visualization.Table(document.getElementById('table_div0')); > > tables[0].draw(dataArray[0]); > > tables[1] = new >> google.visualization.Table(document.getElementById('table_div1')); > > tables[1].draw(edata); > > >> var charts = []; > > charts[0] = new >> google.visualization.AreaChart(document.getElementById('visualization0')); > > charts[0].draw(dataArray[0], options); > > charts[1] = new >> google.visualization.AreaChart(document.getElementById('visualization1')); > > charts[1].draw(edata, options); > > } > > } > > >> var query0 = new >> google.visualization.Query('https://queryURL.com&format=data-table-response'); > > var query1 = new >> google.visualization.Query('https://queryURL.com&format=data-table-response'); > > query0.setQuery('SELECT ga:dateHour,ga:transactions'); > > query0.send(function (response) { > > handleQueryResponse(response, 0); > > }); > > query1.setQuery('SELECT ga:dateHour,ga:transactions'); > > query1.send(function (response) { > > handleQueryResponse(response, 1); > > }); > > } > > google.load('visualization', '1', {packages:['corechart','table'], >> callback: drawChart}); > > > > </script> > > </head> > > <body> > > <div id="visualization0" style="width: 800px;height: 400px"></div> > > <div id="visualization1" style="width: 800px;height: 400px"></div> > > <div id='table_div0' style="width: 800px;"></div> > > <div id='table_div1' style="width: 800px;"></div> > > </body> > > </html> > > On Monday, June 1, 2015 at 4:53:45 PM UTC+2, Sergey wrote: > > Hi Mark, > > This is certainly possible, but it can get a bit tricky. One > straightforward way you could accomplish this is simply by adding all the > rows from the second DataTable to the first one, and then sorting it. Here > is a jsfiddle sketch for how this might work: > http://jsfiddle.net/f3yk43oe/ > > The second way that you could solve this is by using > google.visualization.data.join, which would give you three output > columns, and you would have to resolve duplicate dates somehow (although > you'd have to do that using the first method as well, so I'm not sure > there's a benefit to using join). > > On Mon, Jun 1, 2015 at 3:55 AM Mark <[email protected] <javascript:>> > wrote: > >> Hello, >> >> Is there a way to join two similar queries into one areachart? The only >> difference between the two queries is the date. >> >> >> *Query one data:* >> google.visualization.Query.setResponse({"status":"ok","table":{"rows":[{"c":[{"v":"2014060200"},{"v":1}]},{"c":[{"v":"2014060201"},{"v":0}]},{"c":[{"v":"2014060202"},{"v":0}]},{"c":[{"v":"2014060203"},{"v":0}]},{"c":[{"v":"2014060204"},{"v":0}]},{"c":[{"v":"2014060205"},{"v":0}]},{"c":[{"v":"2014060206"},{"v":0}]},{"c":[{"v":"2014060207"},{"v":1}]},{"c":[{"v":"2014060208"},{"v":0}]},{"c":[{"v":"2014060209"},{"v":6}]},{"c":[{"v":"2014060210"},{"v":7}]},{"c":[{"v":"2014060211"},{"v":9}]},{"c":[{"v":"2014060212"},{"v":6}]},{"c":[{"v":"2014060213"},{"v":10}]},{"c":[{"v":"2014060214"},{"v":7}]},{"c":[{"v":"2014060215"},{"v":6}]},{"c":[{"v":"2014060216"},{"v":7}]},{"c":[{"v":"2014060217"},{"v":3}]},{"c":[{"v":"2014060218"},{"v":2}]},{"c":[{"v":"2014060219"},{"v":6}]},{"c":[{"v":"2014060220"},{"v":10}]},{"c":[{"v":"2014060221"},{"v":7}]},{"c":[{"v":"2014060222"},{"v":9}]},{"c":[{"v":"2014060223"},{"v":4}]}],"cols":[{"type":"string","id":"ga:dateHour","label":"ga:dateHour"},{"type":"number","id":"ga:transactions","label":"ga:transactions"}]},"reqId”:”0”,”version":"0.6"}); >> >> >> *Query two data:* >> google.visualization.Query.setResponse({"status":"ok","table":{"rows":[{"c":[{"v":"2015060108"},{"v":5}]}],"cols":[{"type":"string","id":"ga:dateHour","label":"ga:dateHour"},{"type":"number","id":"ga:transactions","label":"ga:transactions"}]},"reqId”:”1”,”version":"0.6"}); >> >> So I would like to display the data of the second query in the same chart. >> >> My code with one query: >> >>> google.setOnLoadCallback(drawVisualization); >> >> function drawVisualization () { >>> >>> >>> >>> var query = new google.visualization.Query(' >>>> https://test.appspot.com/query?id=98yu4fsftestewr&format=data-table-response' >>>> ); >>> >>> >>> >>> query.send(function (response) { >>> >>> var data = response.getDataTable(); >>> >>> >>> >>> data.setColumnLabel(1, 'Aantal orders'); >>> >>> >>> >>> var sts_transactions_year_hourWrapper = new >>>> google.visualization.ChartWrapper({ >>> >>> containerId: "sts_stats_graph_1", >>> >>> dataTable: data, >>> >>> chartType: "AreaChart", >>> >>> }); >>> >>> sts_transactions_year_hourWrapper.draw(); >>> >>> >>>> }); >>> >>> } >>> >>> >>>> -- >> 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] >> <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> For more options, visit https://groups.google.com/d/optout. >> > -- 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 http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
