Chart.js + : Dynamically create Line chart with database MS SQL using Jquery Ajax C# example

Our Reader Score
[Total: 1 Average: 3]
 Overview:  This article explains using Chart.js we create a Line Chart with database MS SQL server connectivity via jQuery ajax call in c#. You can also check my previous article related to Chartjs , or check Using HTML5 Canvas Chart.js Generate Simple Pie Chart example Simple Bar Chart example using html5 canvas jQuery,  Dynamically Create Pie chart with database JQuery Chart.js Ajax C#.

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

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.


Chart.js + : Dynamically create Line chart with database MS SQL using Jquery Ajax C# example
Dynamically create Line chart in C# using Chart.js

What is Line Chart?

A line chart is a way of plotting data points on a line. Often, it is used to show trend data and the comparison of two data sets.

The line chart requires an array of labels for each of the data points. This is shown on the X-axis. The data for line charts is broken up into an array of datasets.

Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.

The label key on each dataset is optional, and can be used when generating a scale for the chart.

Steps to generate Line Chart in C#:

  1. Create Database and insert Data check Fig 1, Fig 2
  2. Download Chart.js and jQuery latest files.
  3. HTML Markup: add HTML5 canvas tag which is used for Line Chart data display.
  4. Server-side code: C# – Add WebMethod service which returns JSON format data.
  5. Client Side code:  making jQuey ajax call to WebMethod, and initialize chart.js

Introduction :

Here we dynamically create a Line Chart, which shows data from the database ( Ms SQL server ). In my database, I have already created a table which stores data ( Product [Mobile] Sales order per year ).

So basically our Line chart data will display selected mobile Sales Orders for selected year month wise .i.e. ( how many X and Y mobiles sales on nth month ).

# Database Schema and Data:

Fig 1: Database Schema-

MS SQL server Database Schema for dynamically creating Line chart using HTML5 canvas Chart.js c# example

Fig 2: Database data values- used to create dynamic line chart in c# with Chart.js

Ms sql server data for create Line chart using HTML5 canvas Chart.js c# example


Here’s the query to get distinct month name from a DateTime datatype

Query to get monthly mobile total quantity of orders


# Download: Chart.js file and include in your C# Web Application

First, we need to download and include latest files of the chart.js , and latest jQuery library in our web page. By  doing that our HTML markup under head tag looks like as shown below.

# Html Markup : Adding HTML5 Canvas Tag

I have added 3 drop-down list control for selecting Mobile 1 , Mobile 2 and the year, along with a button and the HTML5 Canvas tag.

Now on button click will make a jQuery ajax call, and then on it’s success  method our Line chart gets generated dynamically by using Chart.js library and HTML5 Canvas tag.

# Code Behind: Ajax call WebMethod, and returns JSON format data to create Line Chart

First we add a WebService in our application .i.e ( myWebService.asmx file), and then we write our WebMethod which returns JSON format data.

I must suggest you to have a look on how to make a simple jQuery ajax JSON example in with SQL database. Here the full code, this is how our WebMethod looks like.

 # jQuery :- Client side code, initializing Chart.js

Now we do our 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 when user select any value from drop-down list and click show button, then Line chart gets created from live database.


Chart.js + : Dynamically create Line chart with database MS SQL using Jquery Ajax C# 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!

Get your Printable Copy


  1. thank you for this tutorial, it’s great!! just want to ask, how to fill the color for legends? My linechart is able to show the legend text but the color is not the same with what I have set with them. thank you!

  2. I get an error when I try to invoke the web method.
    The type System.Collections.Generic.List`1[[System.String, mscorlib, Version=, Culture=neutral, PublicKeyToken=b77a5c561934e089]] may not be used in this context.

    I’m using the following libraries along with the web service as copied from the post:
    using System;
    using System.Collections.Generic;
    using System.Web.Services;
    using System.Web.Script.Services;
    using System.Configuration;
    using System.Data;
    using System.Data.SqlClient;

    Any suggestions?

  3. Excellent exhibition of complex line chart tutorial with database. Was looking for it .. Very neat and clean.
    Thanks a lot. Do keep posting such useful stuffs