Create stacked bar chart using google charts - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Create stacked bar chart using google charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Stack Graph</title> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
      //from   w ww. java2  s.  c o m
      </script> 
      <script type="text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      
      </script> 
   </head> 
   <body> 
      <div id="container" style="width: 550px; height: 400px; margin: 0 auto"> 
      </div> 
      <script language="JavaScript">
         function drawChart() {
            var data = google.visualization.arrayToDataTable([
                  ['Year', 'Asia', 'Europe'],
                  ['2012',  50,      390],
                  ['2013',  100,      400],
                  ['2014',  150,      440],
                  ['2015',  250,       480],
                  ['2016',  330,      540]
             ]);
            var options = {
                isStacked: 'percent',
                height: 300,
                legend: {position: 'top', maxLines: 3},
                hAxis: {
                  minValue: 0,
                  ticks: [0, .3, .6, .9, 1]
                }
              };
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      
      </script>  
   </body>
</html>

Related Tutorials