Question

I’m using Google charts to interactively draw some data.

I want to draw two charts. The first chart plots f(x) vs. x. The second chart plots g(x,y) vs. y (for a fixed value x). On mouseover for the first chart, the x value will be used to redraw g(x,y) vs. y.

For example, on mouseover of x=1 on the first chart, the second chart would refresh, drawing g(1,y) vs. y.

The only way I’ve been able to accomplish this was to manually bind the mouseover event in javascript, and trigger a full redraw of the second chart (by erasing its data and copying in data with the moused over x value). However, there is a built-in mechanism to redraw the chart using values from controls (e.g. a slider, example here).

Does anyone know if there is a way to bind two charts so that the mouseover event can be used to redraw one chart with new parameters?

Answer 1

Have a look at the Programmatic Control Changes example. You can change the lower and upper bounds of the slider by code:

document.getElementById('rangeButton').onclick = function() {
  slider.setState({'lowValue': 2, 'highValue': 5});
  slider.draw();
};

If you choose a lowValue and highValue of both 5 for example only rows containing this value for the specified column will be shown. Call this inside your onmouseover event of the first chart:

google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
    // get the value for x in the current row from the data table
    var xValue = data.getValue (e.row, 0);
    // set the new bounds of the slider
    slider.setState({'lowValue': xValue, 'highValue': xValue});
    // update the slider (and chart2)
    slider.draw();
  }
);

As you will not want the slider being visible, just hide it:

// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";