How to create line charts on ASP.NET Web Form with MS SQL Server Database and Highcharts (tutorial)



How to create line charts on ASP.NET Web Form with MS SQL Server Database and Highcharts (tutorial)

How to create line charts on ASP.NET Web Form with MS SQL Server Database and Highcharts (tutorial)

Shows how to read from SQL database from ASP.NET Webform and draw a line Chart using the Highcharts javascript library. #ASPNET #Highcharts #SQLServerDatabase #Webform #lineChart

Please help to like the video if it is helpful for you.

It uses Server Explorer to view the SQL Server Database and use properties to get it’s connection string. The connection string is added to Web.config which is used in the codes later to access the database. The data from the database is read onto a DataTable which is used to load onto a gridview and shown on the Webform.
We’re using highcharts javascript library to plot a line chart (Spline) on the ASP.NET Webform.
https://www.highcharts.com/demo/spline-inverted
A quick run through on where to get the chart options used to plot different type of charts. The Chart options are created using javascript on the aspx. The data points are defined using a C# code behind string variable which is populated during Page Load in the C# Code behind codes where the database data in the DataTable converted into the format required for Highcharts. The data are then populated into the string variable which is plotted onto Webform.

0:16 – Add SQL Server database to Server Explorer
2:53 – Highcharts website and chart options configuration
4:05 – Write Javascript codes for highcharts in aspx file
8:43 – Add Connection String in Web.config
10:06 – Write C# codes to read from Database and Load them onto Gridview
18:58 – Write C# codes to read database values from DataTable and populate to line chart