Line Chart with Compare to Past data

[KWeb]

I'm trying to create a line chart which has this current year's (or months) data and then to compare it to last year's (or months) data - similar to the functionality you have in Google Analytics where you can compare site traffic for this year against last year (see below screen shot)

I can't seem to work out how to plot these 2 sets of data on the same chart because one would have dates from a different range to the other set.

Any pointers/advice would be really appreciated.

Thanks

[Daniel LaLiberte]

I believe what you want would work if you use the 'domain' role (see https://developers.google.com/chart/interactive/docs/roles ). For each date regardless of year, you would have two domain columns, one for one year, and one for the prior year, and two columns for the values on those dates.

Here is an example of how this can be done:

function drawVisualization() {
  // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn({type: 'date', role: 'domain'}, '2009 Quarter');
        data.addColumn('number', '2009 Sales');
        data.addColumn({type: 'date', role: 'domain'}, '2008 Quarter');
        data.addColumn('number', '2008 Sales');
        data.addRows([
          [new Date(2009, 0, 1), 1000, new Date(2008, 0, 1), 800],
          [new Date(2009, 1, 1), 800, new Date(2008, 1, 1), 600],
          [new Date(2009, 2, 1), 765, new Date(2008, 2, 1), 987],
          [new Date(2009, 3, 1), 555, new Date(2008, 3, 1), 1500]
        ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {width: 500, height: 400,
                  focusTarget: 'category'}
          );
}

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[James Yao]

Hi Daniel, 

I saw your post.. even 3 years after. It helps for me, thank you.

I have a question, how can I put two lines into one graph but this two lines have different date range, I mean, for example, one line has 7 days but another only have 2 days.

I tried it in your way, but got error message for column number. Do you have a solution for this.

Thanks,

James

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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/groups/opt_out.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

Can you show us some code that tries to do what you want?  

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/groups/opt_out.

--

Daniel LaLiberte  - 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+unsub...@googlegroups.com.

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/326dbb80-ac78-4ff5-98b0-b042109fdcd0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[James Yao]

Hi Daniel,

Thanks for reply.

In GA, if you choose different date range, it will like below:

But in my code for Google Chart, I must fill the all rest data for different range. Otherwise I'll get an column differ error.

Do you have solution for this?

Thank you very much!

Regards,

James

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/326dbb80-ac78-4ff5-98b0-b042109fdcd0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Ko9HcJ-wtZ8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

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/CAOtcSJNhQnSDSzvrdrmAwJcG9EDAO9P7htrO86MC2zVkKPKtbA%40mail.gmail.com.

[Francesco Pepe]

It's possible to group two datatables?

var cols = [{"id":"ga:date","label":"date","type":"date"},{"id":"ga:sessions","label":"sessions","type":"number"},{"id":"ga:pageviews","label":"pageviews","type":"number"}];

var cols2 = [{"id":"ga:date","label":"date","type":"date"},{"id":"ga:sessions","label":"sessions","type":"number"},{"id":"ga:pageviews","label":"pageviews","type":"number"}];

var rows= [

{"c":[{"v":"Date(2018, 07, 16)"},{"v":"149"},{"v":"559"}]},

{"c":[{"v":"Date(2018, 07, 17)"},{"v":"158"},{"v":"529"}]},

{"c":[{"v":"Date(2018, 07, 18)"},{"v":"110"},{"v":"404"}]},

{"c":[{"v":"Date(2018, 07, 19)"},{"v":"96"},{"v":"350"}]},

{"c":[{"v":"Date(2018, 07, 20)"},{"v":"242"},{"v":"883"}]}

];

var rows2= [

{"c":[{"v":"Date(2018, 08, 16)"},{"v":"119"},{"v":"229"}]},

{"c":[{"v":"Date(2018, 08, 17)"},{"v":"118"},{"v":"319"}]},

{"c":[{"v":"Date(2018, 08, 18)"},{"v":"110"},{"v":"414"}]},

{"c":[{"v":"Date(2018, 08, 19)"},{"v":"161"},{"v":"310"}]},

{"c":[{"v":"Date(2018, 08, 20)"},{"v":"212"},{"v":"813"}]}

];

    var data = new google.visualization.DataTable({cols:cols,rows:rows});

    var data2 = new google.visualization.DataTable({cols:cols2,rows:rows2});

      

    var joinedData = google.visualization.data.join(data, data2, 'full', [[0,0], [1,1], [2,2]], [1], [1]);

Here's a fiddle: https://jsfiddle.net/Tropicalista/94f8bmL0/16/