This article is about Chart in ASP .NET.
Most of the web application’s require data to be presented in graphical representation. Charts are easy to understand and gives clear idea about the data to the user. It is best to use chart for representing some data in web application.
In this article we will use Line chart for data representation. The data will be retrieved from database and represented in graph on Web Page.
Let’s consider the example of shop system. The user requires the report to view daily sales. We can show it in tabular format. But it would be best to represent this report in line chart so that user can analyse the progress.
Create simple system for this situation. We require database from which we will retrieve the data.Create the table tblProduct.
Insert dump data in the tblProduct.
To get the quantity sold per day the query is
SELECT CONVERT(VARCHAR,date,106) ‘Date’,SUM(quantity_sold) ‘Qty’ FROM tblProduct GROUP BY date;
Create page Default.aspx.
For data we have to create WebMethod which will return data.
For Line chart we require two data-sets: 1.Label (X-axis) 2.Data (Y-axis)
So the WebMethod will send the List of string containing Labels and Data.The WebMethod is:
When we run the Default.aspx. The WebMethod gets called and the data it sends is:
And the browser shows
You can download Source Code from here.
Hope you have got idea about how to use chart.js in ASP .NET for line chart using data from SQL Database. If you any query/suggestions please let me know in comment below.