CODEWITHSUNDEEP
chartsgoogle-visualizationlegend
mpsbhat
mpsbhat

Reputation: 2773

Common legends for two charts in Google visualization

I have a sample fiddle here which contain two Google visualization combo charts drawn from different data sources. 

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05',  165,      938,         522,             998,           450,      614.6],
    ['2005/06',  135,      1120,        599,             1268,          288,      682],
    ['2006/07',  157,      1167,        587,             807,           397,      623],
    ['2007/08',  139,      1110,        615,             968,           215,      609.4],
    ['2008/09',  136,      691,         629,             1026,          366,      569.6]
  ]);

    var data2 = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2009/05',  755,      451,         44,          854,           356,      785],
    ['2010/06',  43,       1512,        96,          7545,          565,      312],
    ['2011/07',  523,      2465,        895,         454,           256,      623],
    ['2012/08',  198,      1503,        615,         968,           215,      785],
    ['2013/09',  53,       691,         854,         1026,          296,      751]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country (2004 - 2008)',
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
      isStacked: true,
      'legend': {'position': 'top'},
  };

      var options2 = {
    title : 'Monthly Coffee Production by Country (2009 - 2013)',
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
      isStacked: true,
      'legend': {'position': 'top' },
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);

     var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2'));
  chart2.draw(data2, options2);
}

How can I have a common legends for both charts on selecting which will highlight the respective stack in both charts.

Upvotes: 0

Views: 933

Answers (1)

juvian
juvian

Reputation: 16068

Was a bit tricky, but found a way to do it:

1) Add tooltip: { trigger: 'both' }, to both of your charts options. This will make tooltip show when you use chart.setSelection()

2) Add an event handler to set the selection for both charts on mousehover of a data point:

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2'));

    function handler(e) { // e = {row, column}
        if (e != null) {
            chart2.setSelection([e]); // set same selection for both charts
            chart.setSelection([e]);// set same selection for both charts
        }
    }

    google.visualization.events.addListener(chart, 'onmouseover', handler);
    google.visualization.events.addListener(chart2, 'onmouseover', handler);

    chart.draw(data, options);

    chart2.draw(data2, options2);

Here is your working example: http://jsfiddle.net/oxra70jL/3/

Upvotes: 1

Related Questions