Blue Theme Orange Theme Green Theme Red Theme
 
Nevron Chart
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
Team Foundation Server Hosting
Search :       Advanced Search »
Home » Office Development » MSChart : How to Draw a Line or Multiple Line Charts

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.

Author Rank :
Page Views : 11989
Downloads : 232
Rating :
 Rate it
Level : Beginner
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
LineChart.rar
 
 
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
 Tag Cloud
 Latest Jobs
More ... 
 Latest Interview Questions
More ... 


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

img1.gif

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

img2.gif

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. 

img3.gif
  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.
img4.gif

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.

img11.gif

The output will be as below.

 
img6.gif
 
Some Important Properties
  • Setting Chart border and BackColor.

img7.gif

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

img8.gif

  • Legend Properties

img9.gif

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

img10.gif

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.

Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.
Login to add your contents and source code to this article
 [Top] Rate this article
 
 About the author
 
Suthish Nair

Mindcracker MVP

Technical Team Lead, Application Developer.

Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Discover the Top 5 .NET Memory Management Fundamentals
To write the best .NET code, you need to know exactly how the .NET framework really manages memory. Ricky Leeks presents the Top 5 fundamental facts of .NET memory management. Learn more.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
Nevron Chart
Become a Sponsor
 Comments
Display Data Table at bottom of graph by Scott On September 13, 2010
I need to show a data table at the bottom of my graph.  Like the following:

               Jan   Feb    Mar
Series 1   2.0    1.0     1.5   
Series 2   3.0    2.1     2.1          
Series 3   2.0    3.5     4.0

Any Ideas?  I can get the table to show the Values on the right (Series 1, Series2, Series3).

Thanks for the great article!

Reply | Email | Modify 
Re: Display Data Table at bottom of graph by Suthish On September 20, 2010
Reply | Email | Modify 
Datatable display.. by Suthish On September 20, 2010
Hi Scott,

There is no direct way in displaying the tables. 

refer article, shows legends plot..


Another way, is using a Grid View.

Let me try, if got will share here..

Reply | Email | Modify 
Just what I needed!!! by Scott On September 21, 2010
Suthish,
The second post that you have there is exactly what i was looking for.  Thank you very much for posting.

Scott
Reply | Email | Modify 
article re-written by Suthish On July 31, 2011
article re-written
Reply | Email | Modify 
Very Nice by Angelina On August 1, 2011
Very Nice Article...........
Reply | Email | Modify 
Re: Very Nice by Suthish On August 1, 2011
Thank You!
Reply | Email | Modify 
ms-chart by ramarao On January 21, 2012
nice post
Reply | Email | Modify 
Discover the top 5 tips for understanding .NET Interop
 © 2012  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.