Common legends for two charts in Google visualization - Javascript Google Chart

Javascript examples for Google Chart:Legend

  1. HOME
  2. Javascript
  3. Google Chart
  4. Legend

Description

Common legends for two charts in Google visualization

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Combo Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
   </head> 
   <body> 
      <div id="chart_div"></div> 
      <br> 
      <br> 
      <br> 
      <div id="chart_div2"></div> 
      <script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {//from  w w w  . j a  v a  2s.  c o m
    // 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'
        },
        tooltip: {
            trigger: 'both'
        },
    };
    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'
        },
        tooltip: {
            trigger: 'both'
        },
    };
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2'));
        function handler(e) {
            if (e != null) {
                chart2.setSelection([e]);
                chart.setSelection([e]);
            }
        }
        google.visualization.events.addListener(chart, 'onmouseover', handler);
        google.visualization.events.addListener(chart2, 'onmouseover', handler);
        chart.draw(data, options);
        chart2.draw(data2, options2);
}

      </script>  
   </body>
</html>

Related Tutorials