Dual Dashboard Google Chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Dual Dashboard Google Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Google Charts Tutorial</title> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
    /*from  www .  j  ava 2 s .  c o m*/
      </script> 
      <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
      </script> 
   </head> 
   <body> 
      <div id="container" style="width: auto; height: 450px; margin: 0 auto"></div> 
      <div id="container2" style="width: auto; height: 450px; margin: 0 auto"></div> 
      <script language="JavaScript">
        function drawChart() {
            var data1 = google.visualization.arrayToDataTable([
                ['Fruit', 'Mount', { role: 'annotation' }, 'weight', { role: 'annotation' }],
                ['Apple', 1000, '1000', 245, '245'],
                ['Mango', 1234, '1234', 234, '234'],
                ['Watermelon', 12345, '12345', 342, '342'],
                ['Pineapple', 7321, '7321', 545, '545'],
                ['Grape', 46723, '46723', 2345, '2345'],
                ['Banana', 9643, '9643', 462, '462'],
                ['Orange', 4684, '4684', 235, '235']
            ]);
            var options1 = { title: 'About Fruit', isStacked: true };
            var chart1 = new google.visualization.BarChart(document.getElementById('container'));
            chart1.draw(data1, options1);
        }
        function drawChart1() {
            var data1 = google.visualization.arrayToDataTable([
                ['Vegetables', 'Mount', { role: 'annotation' }, 'Weight', { role: 'annotation' }],
                ['Cabbage', 117021, '117021', 134, '134'],
                ['Celery ', 1673407, '1673407', 194, '194'],
                ['Asparagus', 152139, '152139', 192, '192'],
                ['Cucumber', 180718, '180718', 216, '216'],
                ['Onion', 14214, '14214', 168, '168'],
                ['Pumpkin', 183667, '183667', 215, '215'],
                ['Sprout ', 15956, '15956', 118, '118']
            ]);
            var options1 = { title: 'About Vegetables', isStacked: true, is3D: true, };
            // Instantiate and draw the chart.
            var chart2 = new google.visualization.BarChart(document.getElementById('container2'));
            chart2.draw(data1, options1);
        }
        google.charts.setOnLoadCallback(drawChart);
        google.charts.setOnLoadCallback(drawChart1);
    
      </script>  
   </body>
</html>

Related Tutorials