Multiple Charts or ChartArea on a single Chart control - MSChart

Suthish Nair

15y114.4k10100Article

MSChartChartArea on a single Chart controlMultiple Chart

10 Comments

Join the conversation! Your thoughts help the community grow.

hasan ali7y ago
Das ist sehr shon
dhurandhar11y ago
please help
dhurandhar11y ago
Sir i want to add splitter control between chartAreas in a single chart control, to move/expand chartarea at run time
mahendra bisht13y ago
I need to add the horizontal scroll bar. please help me
Sudeep Syamnath14y ago
Nice article. One question though How can I show respective chart headers and legends adjacent to each chart?
janaki janaki15y ago
hi i have one problem with asp.net chart control tootip that is if less number of coloumns are there it showing correctely but if more number of coloumns are there like 15 it will not show correctely, means if data is more than 30 characters to any coloumn it will cutting last coloumn please help its very urgent for me string lToolTipTxt = "Project\t\t\t: " + ProjetcData.Rows[i][PPM_PROJECT] + Environment.NewLine +"Description\t\t: " + ProjetcData.Rows[i][PPM_DESCRIPTION] + Environment.NewLine +"Strategic Value\t\t: " + ProjetcData.Rows[i][PPM_STRATEGICVALUE] + " %" + Environment.NewLine +"NPV\t\t\t: " + ProjetcData.Rows[i][PPM_BUBBLESIZE] + Environment.NewLine +"Budget\t\t\t: " + (ProjetcData.Rows[i][PPM_BUDGET].ToString()) + Environment.NewLine +"Risk Rating\t\t: " + ProjetcData.Rows[i][PPM_RISKTYPE] + Environment.NewLine +"Requestor(s)\t\t: " + ProjetcData.Rows[i][PPM_REQUESTOR] + Environment.NewLine +"Approver(s)\t\t: " + ProjetcData.Rows[i][PPM_APPROVER] + Environment.NewLine +"Manager\t\t: " + ProjetcData.Rows[i][PPM_SPONSOR] + Environment.NewLine +"Sponsor(s)\t\t: " + ProjetcData.Rows[i][PPM_PLANSTART] + Environment.NewLine +"Planned Start\t\t: " + ProjetcData.Rows[i][PPM_PLANEND] + Environment.NewLine +"Planned End\t\t: " + ProjetcData.Rows[i][PPM_PLANEFFORT] + Environment.NewLine +"Planned Effort\t\t: " + ProjetcData.Rows[i][PPM_PROJECTCATEGORY] + Environment.NewLine +"Category\t\t: " + ProjetcData.Rows[i][PPM_PROJECTTYPE] + Environment.NewLine +"Type\t\t\t: " + ProjetcData.Rows[i][PPM_PROJECTCATEGORY] + Environment.NewLine +"Requesting Organization\t: " + ProjetcData.Rows[i][PPM_REQORG] + Environment.NewLine +"Sponsoring Organizaion\t: " + ProjetcData.Rows[i][PPM_SPONORG] + Environment.NewLine + Environment.NewLine + Environment.NewLine + Environment.NewLine; datapoint.tootip=lToolTipTxt; if i give like this it will show above issue
Gokhan ATALI15y ago
i want to draw XY graph with MSChart but my values are same this (0.2397434905E-01) Please help me :( and my application is desk application (windowsform)
- Suthish Nair15y ago
  post your problem in forum, so we can help you
Faisal Shah15y ago
Brilliant
- Suthish Nair15y ago
  Thank you

Getting Started

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

Refer below image:

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.