Chart.js : Create pie chart using HTML5 canvas in Jquery [Example]

4
Our Reader Score
[Total: 0 Average: 0]

Pie chart: In this article will create a pie chart using chart.js library with HTML5 canvas. Chart.js uses the HTML5 canvas element. It’s supported in all modern browsers, and polyfills support for IE7/8. Chart.js has many more feature do visit their official website.

Download: First download chart.js library from Github or from the official website.

After downloading files, you will get the chart.js and chart.min.js file includes it in your project .i.e web page HTML page.


# Html Markup: Where you want to display your pie chart.

Now let’s add html5 canvas tag in your page and specify width, height respectively. Your HTML markup looks like below


 # jQuery: Code Implement chart.js on html5 canvas tag.

Try it Yourself ⇒

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.

Yeah, you are done with it, Keep visiting us for more article 🙂


Get your Printable Copy

4 COMMENTS

  1. Hi Satinder, Can u share how can i do with the dynamic data coming from database ? I am using chart.js 1.0.2 version..

LEAVE A REPLY