Want a free Ebook & latest Update Subscribe Now
  [email protected]      beta
Donate

Chart.js : Simple bar chart example using html5 canvas jquery

Overview: This article explains about bar chart, here we are going to create simple bar chart by using chart.js library in jquery.  A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. You can also check my related previous article  Simple pie chart example using chart.js , Create pie chart with database Ms Sql server in asp.net.First we download and include

First we download and include Chart.js file in our web page, and latest jQuery file.

Html Markup : Our head tag look like as shown below

//*
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/Chart.js" type="text/javascript"></script>
//*

# Using Canvas html5 tag we generate Bar chart

Html Markup: Added a canvas html5 tag with some specific width and height, so our markup look like as shown below

//*
<div>
   <canvas id="myBarChart" width="500" height="300"></canvas>
</div>
//*

jQuery : Here we write code which make our canvas html5 tag into a bar chart.

//*
var ctx = $("#myBarChart").get(0).getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);
//*

Here as data is our variable which stores JSON formatted data. The Bar chart requires an array of labels for each of the data points and also has an array of datasets, each with colours and an array of data.

The label key on each dataset is optional, and can be used when generating a scale for the chart. Bar chart data structure look like as shown below

//*
var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [{
        label: "My First dataset",
        fillColor: "#FC9775",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "My Second dataset",
        fillColor: "#5A69A6",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};
//*

Final code to generate bar chart using chart.js

//*
$(document).ready(function () {
    var data = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        datasets: [{
            label: "My First dataset",
            fillColor: "#FC9775",
            data: [65, 59, 80, 81, 56, 55, 40]
        }, {
            label: "My Second dataset",
            fillColor: "#5A69A6",
            data: [28, 48, 40, 19, 86, 27, 90]
        }]
    };

    var ctx = $("#myBarChart").get(0).getContext("2d");
    var myBarChart = new Chart(ctx).Bar(data);
});
//*

Output: Displaying Bar chart

Bar chart using chart.js jquery example

Bar chart using chart.js jquery example

 

You can also check these articles:

  1. Chart.js Asp.net : Create Pie chart with database Jquery Ajax C#.
  2. Chart.js Asp.net: Create Line chart with database Jquery Ajax C#.
  3. Generic Handler ashx file : Post send JSON data in Asp.net C#.
  4. jQuery Ajax JSON Example in Asp.net with sql database.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Share:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }


3 comments on “Chart.js : Simple bar chart example using html5 canvas jquery”

  1. Iman

    Hi Satinder,

    When I’ve got an error when running the code: Object doesn’t support property or method ‘Bar’

    Then I changed the code into:
    var myChart = new Chart(ctx, {
    type: ‘bar’,
    data: data,
    });

    The bar chart appeared in grey color.
    Tooltip only display specific bar (not bars on the same month).
    What’s wrong with the code ?

    • Satinder singh

      Hi Iman,
      You might be getting this error cause of Chart.js version different. Thank you for knowing me, soon will update this article with updated version.
      BTW Here’s extra comma in your code, that may be gives you error.
      var myChart = new Chart(ctx, {
      type: ‘bar’,
      data: data // Removed extra comma
      });


Post Comment


Your email address will not be published. Required fields are marked *