1 Event Handler for 2 Google Charts - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

1 Event Handler for 2 Google Charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {//from   w ww  . ja  v a2 s .  c o m
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Condition');
        data.addColumn('number', 'Frequency');
        data.addRows([
          ['Dementia', 3],
          ['Hypertension', 1],
          ['Hypercholesterolemia', 1],
          ['Coronary artery disease', 1],
          ['Heaches', 2]
        ]);
        var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'Medication');
        data2.addColumn('number', 'Frequency');
        data2.addRows([
          ['Naproxen', 3],
          ['Plavix', 1],
          ['Lasix', 1],
          ['Insulin', 1],
          ['Neurontin', 2]
        ]);
        var options = {
     bars: 'vertical', 
     hAxis: {
        slantedText:true,
        slantedTextAngle:90
     },
     height: 400,
     backgroundColor: {fill: 'transparent'},
     legend: {position: 'none'},
     colors: ['#1b9e77']
   };
     var options2 = {
     bars: 'vertical',
     hAxis: {
        slantedText:true,
        slantedTextAngle:90
     },
     height: 400,
     backgroundColor: {fill: 'transparent'},
     legend: {position: 'none'},
     colors: ['#1b9e77']
   };
        var conditionsbarchart = new google.visualization.ColumnChart(document.getElementById('conditions_chart'));
        var medchart = new google.visualization.ColumnChart(document.getElementById('medications_chart'));
        function selectHandler(mychart, mydata) {
          var selectedItem = mychart.getSelection()[0];
          if (selectedItem) {
            var topping = mydata.getValue(selectedItem.row, 0);
            console.log('The user selected ' + topping);
          }
        }
        google.visualization.events.addListener(conditionsbarchart, 'select', function(){
         selectHandler(conditionsbarchart, data);
        });
        conditionsbarchart.draw(data, options);
        google.visualization.events.addListener(medchart, 'select', function(){
         selectHandler(medchart, data2);
        });
        medchart.draw(data2, options2);
      }
    
      </script> 
   </head> 
   <body> 
      <div id="conditions_chart" style="width:400; height:300"></div> 
      <div id="medications_chart" style="width: 400; height: 300"></div>  
   </body>
</html>

Related Tutorials