bar chart

Alok Nandan

<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() {
      var data = google.visualization.arrayToDataTable([
        ["Girls", "Density", { role: "style" } ],
        ["Boys", 8.94, "#b87333"],
        ["Child", 10.49, "silver"],
        ["Adult", 19.30, "gold"],
        ["Old", 21.45, "color: #e5e4e2"]
      ]);

var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

bar chart

Alok Nandan

<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', 'BOYS', 'GIRLS', 'OTHERS'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

var options = {
          chart: {
            title: 'STUDENT RESULT PERFORMANCE',
            subtitle: 'Excellent, Pass, and Fail: 2014-2017',
          }
        };

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

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

bar chart

bar chart

View Another Modules

Scrollspy Navigationbar

Hover Effect

Tab Open using JS

Dynamic Pagination

Customize Aler Message

Round Pi Chart