Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Friday, February 23, 2018

Google Stacked column charts

You can create a stacked column chart by setting isStacked option true in the normal column chart code. 
Here we are explaining the simple example.

Html Code

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          isStacked:true,
  colors:['orange'],
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Result

9 comments:

  1. Really enjoyed reading your post! I am particularly looking for these points on tech support. Thanks!

    ReplyDelete
  2. Thank you so much for sharing these amazing tips. Digital Signature Certificate

    ReplyDelete
  3. Thanks for the post I actually learned something from it. Very good content on this site Always looking forward to new post. Digital Signature Certificate

    ReplyDelete
  4. Thanks for sharing such great piece of information with us. Class 2 Digital Signature Certificate

    ReplyDelete
  5. Thanks for the post I actually learned something from it. Very good content on this site Always looking forward to new post. Apply Class 3 Digital Signature Certificate

    ReplyDelete
  6. Thanks for sharing this useful piece of information about. Class 2 Digital Signature Certificate

    ReplyDelete

More Posts

FOLLOW