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.