MSChart : How to Draw a Line or Multiple Line Charts

This article shows how to draw a line chart or multiple line charts using MSChart.

Getting Started

This article shows how to draw a Line or Multiple Line Charts using the MSChart control and also applying some important properties like Tool Tip, Legends, Line width, Shadow, 3D etc. A simple SQL Script which returns output for Category wise UnitPrice details which are plotted on a Chart Control. The sample code attached project was made using VS 2010 with the SQL Script. The project contains two web pages with samples of Single Line Chart and Multiple Line Charts. Prerequisite: VS 2008/2010, SQL Server.

References used

Code Explained
 

Drag and Drop a Chart control onto the page and set the Width and Height.



SingleLineChart.aspx.cs

On Page Load an SQL Connection is made and using SqlDataReader data is get fetched from database.

If any rows are found, then the chart is plotted by creating a Chart Area, Series and plotting points for Series. 

1. Creating a ChartArea, it's the primary placeholder for plotting a chart.
2. Creating a Series, used as a placeholder for the data points to get plotted on the chart.
3. The Series Chart type must be a Line Chart.
4. Points are plotted on a Series using the DataBindXY method by passing Column names and values to respective X and Y Axis of Chart, thus plotting the graph.
   

MultipleLineCharts.aspx.cs

Using two different SQL scripts and plotting two different Line Charts. For plotting multiple chart types we need to create multiple Series also on a single Chart Area.

The output will be as below.
 

 

Some Important Properties

• Setting Chart border and BackColor.

• Setting Chart Area X and Y Axis values, enabling 3D etc.

• Legend Properties

• Show Series data points as Label text, ToolTip, set border width and Line color.

Conclusion

This article shows how to draw a Line chart or Multiple Line Chart by using MSChart. Hope you all liked it; the sample code is attached for download and testing the code. Post your comments and rate the article. Post your queries to our Forum Section.