Google charts to create alternative stacked column chart - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Google charts to create alternative stacked column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Column Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
      <div id="ex4"></div> 
      <script type="text/javascript">
            google.load('visualization', '1', {
                packages: ['corechart']
            });/*from w  w w . ja v  a 2s. c o m*/
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Day Of Week');
                data.addColumn('number', 'Motivation Level');
                data.addColumn({
                    role: 'style',
                    type: 'string'
                });
                data.addColumn('number', 'Energy Level');
                data.addColumn({
                    role: 'style',
                    type: 'string'
                });
                data.addRows([
                    ['Monday', 1, 'color: red', .25, 'color: gray'],
                    ['Tuesday', 2, 'color: blue', .5, 'color: red'],
                    ['Wednesday', 3, 'color: red', 1, 'color: gray'],
                    ['Thursday', 4, 'color: red', 2.25, 'color: gray'],
                    ['Friday', 5, 'color: gray', 2.25, 'color: blue'],
                    ['Saturday', 6, 'color: blue', 3, 'color: red'],
                    ['Sunday', 7, 'color: blue', 3.25, 'color: gray'],
                    ]);
                var options = {
                    isStacked: true,
                    width: 1000,
                    height: 563,
                    hAxis: {
                        title: 'Day of Week',
                    },
                    vAxis: {
                        title: 'Rating (scale of 1-10)'
                    }
                };
                var chart = new google.visualization.ColumnChart(
                document.getElementById('ex4'));
                chart.draw(data, options);
            }

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

Related Tutorials