Google Charts API, AnnotatedTimeline: properly setup several series and scales

Question

I am using a Google Charts' AnnotatedTimeline which contains three different series.

The first series has its own scale. The second and third should have the same scale as they represent the same kind of data.

The thing is I can only get the scales to be associated to one series at a time. Here's how I'm currently drawing the chart:

chart.draw(chartData, {scaleType: 'allmaximized', scaleColumns:[0, 1], displayExactValues: true, dateFormat: 'dd MMMM yyyy'});

This way, the first series has its own scale on the left, which is good. The second scale, however, is computed using only the second series' values, so the third series is misplaced on the chart. Changing the method to:

chart.draw(chartData, {scaleType: 'allmaximized', scaleColumns:[0, 1, 2], displayExactValues: true, dateFormat: 'dd MMMM yyyy'});

adds a third scale in the middle of the graph for the third series, which is not what I want.

Is there a way to group series 2 and 3 to get the same scale for both?

Not a direct answer to the scaleType question, but you can achieve the desired results by drawing your own max/min values for the various axes. See the method here — jmac
This works very well to get a proper scale for two series. However it doesn't seem to be possible to specify min and max for a specific scale. So the second and third set of values display properly on the same scale (they're roughly between 1000 and 3000) but the first series is ruled out of the graph (always below 100). — Jukurrpa

jmac jmac · Accepted Answer · 2013-01-23T03:55:25

I see what you're trying to do now. You want to have only 2 axes, 1 that will correspond to the values in columns 0/1, and the other corresponding to column 2. I threw this example together (feel free to copy-paste in to google playground):

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addColumn('number', 'Sold Erasers');
  data.addColumn('string', 'title3');
  data.addColumn('string', 'text3');
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null, 100, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null, 120, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null, 70, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm', 100, null, null],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null, 110, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null, 130, 'Eraser Boom', 'People dig erasers']
  ]);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
      document.getElementById('visualization'));
  annotatedtimeline.draw(data, {'displayAnnotations': true, scaleType: 'allmaximized', scaleColumns:[0, 2]});
}

This shows column 0/1 on the left-side scale, and column 2 on the right-side scale.

Google Charts API, AnnotatedTimeline: properly setup several series and scales

2 Answers