Google Chart API and vertical alignment of multiple charts' data points

Question

Here is the set up using google charts api:

<div id="dashboard">
  <div id="columnchart1" />
  <div id="linechart" />
  <div id="columnchart2" />
  <div id="chartrangefiltercontrol" />
</div>

All charts and the control use the same datatable and are managed with the wrapper classes and the horizontal axis are time (dates). The data needs to line up vertically so the data point on linechart at 1 Jan 2014 must line up with the data points on columnchart1 and columnchart2 for 1 Jan 2014. But they do not.

Attempted to fix the problem by setting the 3 charts options.hAxis.viewWindow.(min, max) values to the same for each chart, but that posed a different problem: the rangefiltercontrol would not zoom the charts (it would still pan side to side).

How do you make the charts scales the same and zoom with the control?

Thank you in advance.

I have made a fix, but I am not sure how clean a design it is. What I have done is make the viewWindow min and max set and added a 'ready' event listener to the control, which in turn adds 'state change' listener to the control which then sets the viewWindow to the control.getState() values. Any comments? — Warwick Hall

asgallant asgallant · Accepted Answer · 2014-03-18T19:00:03

The axis values will not align precisely because ColumnCharts add padding on the left and right of the axis end points to account for the width of the column groups. This padding varies in size and is largely unpredictable, so you have to wait for the charts to render, get the axis ranges, set options appropriately for each chart, and redraw. I would suggest reducing your dashboard to controlling a single chart from the ChartRangeFilter, and using a "ready" event handler on that chart to set the data for the other charts and redraw them. This dramatically cuts down on the inter-chart event coordination that would otherwise be necessary (this does not completely eliminate coordination, but it does reduce the amount you have to do).

If you would be so kind as to update your question with your chart code and sample data, I will flesh out my answer with specifics on how you can achieve this.

Google Chart API and vertical alignment of multiple charts' data points

1 Answers