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

# 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

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

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

Final code to generate bar chart using chart.js

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 : Create Pie chart with database Jquery Ajax C#.
  2. Chart.js Create Line chart with database Jquery Ajax C#.
  3. Generic Handler ashx file : Post send JSON data in C#.
  4. jQuery Ajax JSON Example in 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!