Chart.js : Create Pie chart with database jQuery Ajax C#

Get your PDF copy
 Pie Chart using ChartJs   This article explains using Chart.js in C# Web Application we can create a pie chart with database MS SQL server connectivity via jQuery ajax call.  You can also have a look on related article Chartjs : simple Pie chart example, Chart.Js : Simple bar chart example using html5 canvas jQuery.

Now in this post here we create a pie chart by using chart.js library and bind data from our database MS Sqlserver, with jQuery ajax calling.

Introduction:  Here we are creating a pie chart, which shows data from the database ( Ms SQL server).  In my database, I have a table which stores data ( website traffic source info ).

So basically our pie chart data will shows traffic source info .i.e. ( how much of page views referral by facebook, twitter, google+, Tumblr etc ).

Chart.js: Simple,clean and engaging charts for designers and developers developed by Nick Downie . It uses the HTML5 canvas element.

It’s supported in all modern browsers, and polyfills support for IE7/8. Chart.js is dependency free and super lightweight.

# Download – Chart.js file and include in Webform

First download and include latest files of the chart.js , jQuery library in your web page.

HTML markup under head tag looks like as shown below.


# Html Markup (Design) – Adding HTML5 Canvas Tag

I have added 2 drop-down list control to select the year, month, along with a button and a  canvas tag.

Now on button click will call jQuery ajax, and then on ajax success our pie chart gets generated by using Chart.js library and HTML5 Canvas tag


# Code Behind – Ajax call WebMethod, and returns JSON format data to create Pie Chart

First add a WebMethod .i.e asmx file, and then we write our WebMethod which returns JSON format data, I must suggest you to have a look  at detail article on  Simple jQuery Ajax JSON example in C# with SQL database connectivity In our .asmx file will create a class named as trafficSourceData as shown below.


Now our WebMethod will pull data from database Ms Sqlserver for specific month and year, and return list of class object .i.e trafficSourceData class list as JSON formatted data, so our pie chart get created using chart.js.

 # jQuery –  initializing Chart.js in WebPage

Now back to client side coding, we have already done with the server-side code by creating WebMethod which return JSON format data. So now in our Ajax call on success will initialize Chart.js variable.

Client-side code looks like as written below


Finally, we are done with coding, Now every time we click button our pie chart gets created.


Chart.js : Create Pie chart with database, calling Jquery Ajax
Create simple pie chart with database, calling jQuery Ajax



You must check these articles:

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!

Get your Printable Copy


  1. Getting Error in this line:

    var myPieChart = new Chart(ctx).Pie(arr);
    Uncaught TypeError: (intermediate value).Pie is not a function

  2. Awesome tutorial.. i was searching for chart.js tutorials for long time now ..
    Thanks a lot
    Explained very clearly. Nice Website

  3. Woah! I’m really digging the template/theme of this blog.
    It’s simple, yet effective. A lot of times
    it’s hard to get that “perfect balance” between user friendliness and appearance.
    I must say you have done a excellent job with this.
    In addition, the blog loads extremely fast for me on Safari.

    Superb Blog!: