Chart JS to draw bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart JS to draw bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   w w  w.  ja v  a 2s .c  om
$(document).ready(function(){
newbardata = {};
            newbardata.labels = [""];
            newbardata.datasets = new Array();
            newbardata.datasets[0] = new Object();
            newbardata.datasets[0].label = 'T1';
            newbardata.datasets[0].fillColor = '#565d70';
            newbardata.datasets[0].strokeColor = '#565d70';
            newbardata.datasets[0].highlightFill = '#565d70';
            newbardata.datasets[0].highlightStroke = '#565d70';
            newbardata.datasets[0].data = [50];
            newbardata.datasets[1] = {};
            newbardata.datasets[1].label = 'T2';
            newbardata.datasets[1].fillColor = '#565d70';
            newbardata.datasets[1].strokeColor = '#565d70';
            newbardata.datasets[1].highlightFill = '#565d70';
            newbardata.datasets[1].highlightStroke = '#565d70';
            newbardata.datasets[1].data = [50];
});
var  baroptions = {
    barValueSpacing : 10,
    barDatasetSpacing : 10,
    responsive : true
  }
var ctx = document.getElementById("bar1").getContext("2d");
var chart = new Chart(ctx).Bar(newbardata,baroptions);
    }

      </script> 
   </head> 
   <body> 
      <canvas class="bar-graph" id="bar1" height="150" width="150"></canvas>  
   </body>
</html>

Related Tutorials