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

/ / 4 Comments

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 colors 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
   

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.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

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

4 Comments

  1. Omar Sedki 09/10/2015 06:41:56
    you can generate the code for your chart with this online Chart Builder (charts.livegap.com)
  2. Iman 04/06/2017 03:51:09
    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 ?
  3. Satinder singh 04/06/2017 05:58:56
    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 });
  4. arshiya fouzia 12/28/2020 09:51:55
    Thank you for putting all these strategies into a very readable place. It shows your ability and great skills. keep sharing such article in future.