I added:
function AddKeyColumn(arr) {
arr.addColumn('string', 'key');
arr.Lf.forEach(function(element, index, array) {
var datatimeString = element.c[0].v;
arr.setCell(index, 2, datatimeString.slice(-2));
});
}
And changed:
var edata = data = new
google.visualization.data.join(dataArray[0], dataArray[1], 'full', [
[2, 2]
], [1], [1]);
Now it works. Thanks for your help!!
On Tuesday, June 30, 2015 at 2:30:30 PM UTC+2, Daniel LaLiberte wrote:
>
> Hi Mark,
>
> I don't think it would work to mix string and number values on the same
> domain axis. It looks like what you should be using for both is datetime,
> if I understand how you have encoded the values. Also, the values should
> not be given as strings as you have done, but should use the recognized
> string notation described here:
> https://developers.google.com/chart/interactive/docs/datesandtimes#--------dates-and-times-using-the-date-string-representation--
>
>
>
> Finally, the order of the columns may make a difference, especially for
> what is shown in tooltips. Each domain column should be followed by the
> series columns that apply to it, like this:
> [
> {type: 'datetime', role: 'domain', "label":"ga:dateHour 2014"}, {type:
> 'number', "label":"ga:transactions"},
> {type: 'datetime', role: 'domain', "label":"ga:dateHour 2015"}, {type:
> 'number', "label":"ga:transactions"}
> ]
>
>
>
>
>
> On Tue, Jun 30, 2015 at 5:49 AM, Mark <mark....@gmail.com <javascript:>>
> wrote:
>
> It would be something like adding:
>
> edata.addColumn({type:'string', role:'domain'});
> edata.addColumn({type:'number', role:'domain'});
>
> ?
>
>
> On Tuesday, June 30, 2015 at 10:17:51 AM UTC+2, Mark wrote:
>
> Hello Daniel,
>
> Thanks for your reply. I read the domain roles documentation but I don't
> really understand how to apply it to my code. Could you help me out with
> this, or give me a start?
> Thanks!
>
> On Monday, June 29, 2015 at 4:25:30 PM UTC+2, Daniel LaLiberte wrote:
>
> Hey Mark,
>
> With two sets of similar domain values, shifted by a year, you probably
> want to use the 'domain' role for the second set. See
> https://developers.google.com/chart/interactive/docs/roles for how to do
> this.
>
> On Mon, Jun 29, 2015 at 5:51 AM, Mark <mark....@gmail.com> wrote:
>
> 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 <mark....@gmail.com> 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 google-visualization-api+unsubscr...@googlegroups.com.
> To post to this group, send email to google-visua...@googlegroups.com.
> 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 google-visualization-api+unsubscr...@googlegroups.com.
> To post to this group, send email to google-visua...@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> - 978-394-1058
> dlali...@google.com 5CC, Cambridge MA
> daniel.l...@gmail.com 9 Juniper Ridge Road, Acton 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 google-visualization-api+unsubscr...@googlegroups.com
> <javascript:>.
> To post to this group, send email to google-visua...@googlegroups.com
> <javascript:>.
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> - 978-394-1058
> dlali...@Googl <javascript:>
> ...
--
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-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
