Highcharts Asp.net: Create Pie chart with jQuery ajax in C# (MS SQL database)

 HighCharts Pie Chart: This article explains how to create a dynamic pie chart using Highcharts in Asp.net C#. Pie chart data will be generated from our database (MS SQL server) connection by calling Webmethod .i.e jQuery ajax call which gives JSON data. You can also check some of my previous charting tutorials. Now in this post, we create a pie chart using Highcharts.js library and bind data from the database.

Why Highcharts?

Highcharts create interactive charts easily for your web projects. Highcharts is the simplest yet most flexible charting API on the market. It is compatible with all modern mobile and desktop browsers including the iPhone/iPad and Internet Explorer from version 6. Pure javascript, i.e., It is solely based on native browser technologies and doesn’t require client side plugins like Flash or Java. Screenshots:

Highcharts Aspnet C# generate pie chart dynamically with database
Create Pie Chart in Asp.net C# using highcharts.js with database [MS SQQL]

Steps to use Highcharts in Asp.net Application.

  1. Create database .i.e table with some data.
  2. Download Highcharts.js and jQuery latest library.
  3. Html Markup: add div tag where pie chart gets displayed.
  4. C#- Create a WebService (WebMethod) which returns data.
  5. jQuery – code to initialize highcharts and binding data (jQuery ajax [json data series]).

Below have provided highcharts examples .i.e working copy of highcharts Asp.net demo downloadable.

# Create Database:

Here are going to create pie chart dynamically, which displays population percentage for respected cities from our database ( MS SQL server ).

In our database, we have a Table named as tb_city_population, and column as City Name and Population have a look at table schema at Fig 1 and then add some data to our table as shown in Fig 2.

So we use these data to generate pie chart dynamically with highcharts plugin.

Fig 1 –Database design schemna used to build pie chart using highcharts Asp.net c#   Fig 2- Database - add data to our table which is used to build pie chart using highcharts Asp.net c# Now we are down with our database base. Let’s head toward Highcharts, jQuery library.

# Download Highcharts.js and jQuery latest library:

For using Highcharts in our project web application, first, we have to download highcharts and add reference of the JavaScript on our Web page or master page.

Also, add the latest jQuery library file in our web page. You can host the jQuery file on your server, or you can also use from the Google-hosted site (recommended, performance wise).

So now our head tag looks like as written below.


#HTML Markup :

Here we add a drop-down list as we want to show pie chart for selected year from this dropdown selected value, a div tag, and a button.

On Button tag we bind a jQuery click event which makes a jQuery ajax call and response on success Bind JSON data to Highcharts, Div tag is used to display Pie Chart.

Finally, this is how our HTML looks like as written below:

# C#: Create a WebMethod, which returns JSON data, which uses to create Pie Chart dynamically.

Look :

Now we add a Web Service (ASMX file) in our Asp.net application. Then write a WebMethod, which returns JSON format data.

I must suggest you to have a look at simple jQuery ajax JSON example in Asp.net with SQL database.

In our ASMX file will create a class named as cityPopulation as shown below.

Below written Webmethod returns the list of city name with city population count, and on the client, we bind this data to our div using Highcharts to generate Pie Chart.

Here this method returns variable p  having list object on cityPopulation class.

 # Jquery: code to initialize Highcharts and call jQuery ajax which display Pie Chart.


We are done with our database and server-side code, and now it’s time play with jQuery at client-side.

Using jQuery will call an ajax method and on its success response we bind JSON data which generate highcharts JSON series. So our pie chart gets created with dynamic data.

Code to initialize Highcharts:

We create a new function as drawPieChart() which initialize Highcharts, and will call this function on our jQuery Ajax success method.

# Calling jQuery Ajax:

Here on button click, we are making an ajax call, and on its success will use JSON data to set highcharts series property.

If you want to increase highcharts pie chart size, you can do by using the full height of the pie chart. By setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart. Code to set highcharts pie chart size as 100%

   Output: We are done, this is how our pie chart looks 

Highcharts Aspnet C# generate pie chart dynamically with database
Highcharts Aspnet C# generate pie chart dynamically with database

Conclusion : Highcharts is an excellent plugin, easy to integrate and it also allows to add interactive charts to our web application.

In this article, we done with simple pie chart highcharts tutorial, and we can also create different kinds of charts like column, bar, line, area, etc.

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