ARTICLE

Multiple Charts or ChartArea on a single Chart control - MSChart

Posted by Suthish Nair Articles | Learn .NET February 02, 2011
This article helps to plot multiple charts or chartarea on a single chart control.
Reader Level:
Download Files:
 

Getting Started


This article helps to plot multiple charts or Chart Area on a single Chart Areas of Chart control.


Refer below image:
 

1.jpg

Four different Chart Areas get plotted on single Chart Area.


Prerequisites: MVS used: 2008/2010, DB used: Northwind.

Code Explained

       Database
 

Stored Procedure used PROC_CALL_MULTICHARTS, which will output four different set of rows.
 

1. ProductName vs. UnitPrice. -- Chart Type used Column.

2. Country vs. Orders. -- Chart Type used SplineArea.

3. Employee vs. Orders. -- Chart Type used Bubble.

4. Company vs. Orders. -- Chart Type used Range.

       
       Source Page

                <asp:Chart ID="Chart1" runat="server" Width="1200px" Height="500px"></asp:Chart>

        
      
Code Behind

         
Namespaces used
                using System.Web.UI.DataVisualization.Charting;

      using System.Collections.Generic;

                using System.Data;

                using System.Data.SqlClient;
 

        Method BindRecords:
 

1. Below line of code will clear any already created Series and ChartAreas.

Chart1.Series.Clear();

                   Chart1.ChartAreas.Clear();


2. Opening the DB connection and calling the stored procedure.


3. SqlDataAdapter will store all the four set of rows and later filling to Dataset.


4. Creating a List Collection for creating ChartArea.

List<string> ChartAreaList = new List<string>();

          ChartAreaList.Add("Products");

          ChartAreaList.Add("Country");

          ChartAreaList.Add("Employee");

          ChartAreaList.Add("Company");


5. Doing a for-loop on Dataset tables count, new ChartArea and Series added to Chart1 control.


6. Setting the ChartArea features like XY Titles, BackColor etc. Axis by calling method SetChartAreaFeatures


7. Setting AlignWithChartArea (A value that represents the name of a ChartArea object to which this
chart area should be aligned
).


8. Finally plotting the chart by calling DataBindXY method.

 

Sample code and sql script attached, download and test the code.

 

Conclusion

          Hope the article helped to plot multiple charts on single chart control.


COMMENT USING