Microsoft .NET: MS Chart Control: Getting Started

The Main Components of a Chart

The Chart control renders a single "Chart Picture." The Chart Picture may be composed of multiple charts - say, a line chart and a bar chart. Each chart within the Chart Picture is referred to as a Chart Area. (Typically the Chart control will have only one Chart Area.) A chart contains one or more series, which are associated with a particular Chart Area. A series is a collection of data points. How the series is rendered depends on its type. A series configured to display as a line will render its data points as a continuous line. To have multiple lines in the chart you would define one series for each line. If the series is configured to display a bar or column then a bar or column is drawn for each data point.

The data points that make up a series usually have two components - an X value and a Y value - although some series types only require a single data point. For line and column series the X value indicates the position of the data point along the chart area's X axis and the Y value indicates the position of the line or the height of the column along the chart area's Y axis.

This sample chart application demonstrates how to create a basic chart in 2D and 3D that uses a code-behind page with dynamic and datasets. Here you can find total 7 types of charts.

Using Dynamic Data Creating Charts:

Step 1: .ASPX Page

The chart area(s), series, and data points can be specified declaratively (either by entering the declarative markup by hand or via the Properties window) or programmatically in the code-behind class. Typically the series and chart area(s) are specified declaratively and the data points are populated programmatically by querying a database or some other dynamic data store. Let's start by discussing how to display a chart whose chart area, series, and data points are all specified declaratively.

Column
Bar
Pyramid
Area
Pie
Line
Funnel charts

<div>

<tr>

Chart Type:<asp:DropDownList ID="ChartType" runat="server" Width="120px" AutoPostBack="True"

<asp:ListItem Value="Column">Column</asp:ListItem>

<asp:ListItem Value="Bar">Bar</asp:ListItem>

<asp:ListItem Value="Pyramid">Pyramid</asp:ListItem>

<asp:ListItem Value="Area">Area</asp:ListItem>

<asp:ListItem Value="Pie">Pie</asp:ListItem>

<asp:ListItem Value="Line">Line</asp:ListItem>

<asp:ListItem Value="Funnel">Funnel</asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr>

<td>

<asp:Chart ID="Chart1" runat="server" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"

Palette="BrightPastel" ImageType="Png" BorderDashStyle="Solid" BackSecondaryColor="White"

BackGradientStyle="TopBottom" BorderWidth="2" BackColor="#D3DFF0" BorderColor="26, 59, 105"

Height="481px" Width="761px">

<asp:Legend Name="Legend1" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"

IsTextAutoFit="False">

</asp:Legend>

</Legends>

<asp:Title Alignment="TopCenter" BackColor="180, 165, 191, 228" BackGradientStyle="TopBottom"

BackHatchStyle="None" Font="Microsoft Sans Serif, 12pt, style=Bold" Name="Role Summary Report"

Text="Role Summary Report" ToolTip="Role Summary Report" ForeColor="26, 59, 105">

</asp:Title>

<asp:Title Alignment="TopCenter" BackColor="Transparent" Font="Microsoft Sans Serif, 10pt, style=Bold "

ToolTip="Chart Type">

</asp:Title>

</Titles>

<asp:Series Name="RolesCount" ChartArea="ChartArea1" Legend="Legend1" CustomProperties="DrawingStyle=Cylinder"

BorderColor="64, 0, 0, 0" Color="224, 64, 10" MarkerSize="5">

<asp:DataPoint YValues="6" />

<asp:DataPoint YValues="9" />

<asp:DataPoint YValues="5" />

<asp:DataPoint YValues="7.5" />

<asp:DataPoint YValues="5.69999980926514" />

<asp:DataPoint YValues="3.20000004768372" />

<asp:DataPoint YValues="8.5" />

<asp:DataPoint YValues="7.5" />

<asp:DataPoint YValues="6.5" />

</Points>

</asp:Series>

</Series>

<asp:ChartArea Name="ChartArea1" BackColor="64, 165, 191, 228" BackSecondaryColor="White"

BorderColor="64, 64, 64, 64" ShadowColor="Transparent" BackGradientStyle="TopBottom">

</AxisY>

<AxisX IsLabelAutoFit="False" LineColor="64, 64, 64, 64" Title="Role Name" ArrowStyle="Triangle"

Interval="1">

</AxisX>

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

</td>

</tr>

</table>

</div>

Step 2: .ASPX.CS

Based on the selected chart type the following code will be executed.

protected void Page_Load(object sender, EventArgs e)

{

if (ChartType.SelectedItem.ToString() == "Bar")

{

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Bar;

Chart1.Titles[1].Text = "Bar Chart";

}

else if (ChartType.SelectedItem.ToString() == "Pie")

{

Chart1.Series["RolesCount"]["3DLabelLineSize"] = "100";

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 15;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Perspective = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsRightAngleAxes = false;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.WallWidth = 0;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsClustered = false;

Chart1.Series[0]["PieDrawingStyle"] = "SoftEdge";

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Pie;

Chart1.Series["RolesCount"]["PieLabelStyle"] = "Inside";

//Chart1.Legends["Legend1"].Enabled = true;

Chart1.Titles[1].Text = "Pie Chart";

}

else if (ChartType.SelectedItem.ToString() == "Line")

{

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Line;

Chart1.Titles[1].Text = "Line Chart";

}

else if (ChartType.SelectedItem.ToString() == "Funnel")

{

//Chart1.Series["RolesCount"]["3DLabelLineSize"] = "100";

Chart1.Series["RolesCount"]["FunnelStyle"] = "YIsHeight";

Chart1.Series["RolesCount"]["FunnelLabelStyle"] = "OutsideInColumn";

Chart1.Series["RolesCount"]["FunnelOutsideLabelPlacement"] = "Right";

Chart1.Series["RolesCount"]["FunnelPointGap"] = "1";

Chart1.Series["RolesCount"]["Funnel3DDrawingStyle"] = "SoftEdge";

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Funnel;

Chart1.Series["RolesCount"]["FunnelLabelStyle"] = "Inside";

// Set 3D angle

Chart1.Series["RolesCount"]["Funnel3DRotationAngle"] = "5";

// Set 3D drawing style

Chart1.Series["RolesCount"]["Funnel3DDrawingStyle"] = "CircularBase";

// Set minimum point height

Chart1.Series["RolesCount"]["FunnelMinPointHeight"] = "0";

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 15;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Perspective = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsRightAngleAxes = false;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.WallWidth = 0;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsClustered = false;

Chart1.Titles[1].Text = "Funnel Chart";

}

else if (ChartType.SelectedItem.ToString() == "Area")

{

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Area;

Chart1.Titles[1].Text = "Area Chart";

}

else if (ChartType.SelectedItem.ToString() == "Pyramid")

{

// Set pyramid data point labels style

Chart1.Series["RolesCount"]["PyramidLabelStyle"] = "OutsideInColumn";

// Set gap between points

Chart1.Series["RolesCount"]["PyramidPointGap"] = "1";

// Set minimum point height

Chart1.Series["RolesCount"]["PyramidMinPointHeight"] = "0";

// Set 3D mode

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

// Set 3D angle

Chart1.Series["RolesCount"]["Pyramid3DRotationAngle"] = "5";

// Set 3D drawing style

Chart1.Series["RolesCount"]["Pyramid3DDrawingStyle"] = "SquareBase";

// Set pyramid value type

Chart1.Series["RolesCount"]["PyramidValueType"] = "Linear";

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Pyramid;

Chart1.Titles[1].Text = "Pie Chart";

}

else

{

Chart1.Series["RolesCount"].ChartType = SeriesChartType.Column;

Chart1.Titles[1].Text = "Column Chart";

}

Using DataSource Controls Creating Charts:

Programmatically Specifying the Chart Data

The previous demo showed how to declaratively specify the chart's data points. These data points are more commonly specified programmatically. The demo displays the same chart as shown above but adds the data points programmatically in the Page_Load event handler. The Chart control's declarative markup in .aspx does not include the hard-coded <Points> collection, but is otherwise the same in that the markup defines a single chart area named MainChartArea and a single column series named Championships:

<div>

<tr>

Chart Type:

<asp:DropDownList ID="ChartType" runat="server" Width="120px" AutoPostBack="True">

<asp:ListItem Value="Column">Column</asp:ListItem>

<asp:ListItem Value="Bar">Bar</asp:ListItem>

<asp:ListItem Value="Pyramid">Pyramid</asp:ListItem>

<asp:ListItem Value="Area">Area</asp:ListItem>

<asp:ListItem Value="Pie">Pie</asp:ListItem>

<asp:ListItem Value="Line">Line</asp:ListItem>

<asp:ListItem Value="Funnel">Funnel</asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr>

<asp:Chart ID="Chart1" runat="server" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"

Palette="BrightPastel" ImageType="Png" BorderDashStyle="Solid" BackSecondaryColor="White"

BackGradientStyle="TopBottom" BorderWidth="2" BackColor="#D3DFF0" BorderColor="26, 59, 105"

Height="481px" Width="761px">

<asp:Legend Name="Legend1" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"

IsTextAutoFit="False">

</asp:Legend>

</Legends>

<asp:Title Alignment="TopCenter" BackColor="180, 165, 191, 228" BackGradientStyle="TopBottom"

BackHatchStyle="None" Font="Microsoft Sans Serif, 12pt, style=Bold" Name="Employee Data Dump"

Text="Employee Data Dump" ToolTip="Employee Data Dump" ForeColor="26, 59, 105">

</asp:Title>

<asp:Title Alignment="TopCenter" BackColor="Transparent" Font="Microsoft Sans Serif, 10pt, style=Bold "

ToolTip="Chart Type">

</asp:Title>

</Titles>

<asp:Series Name="EmpCount" ChartArea="ChartArea1" Legend="Legend1" CustomProperties="DrawingStyle=Cylinder"

BorderColor="64, 0, 0, 0" Color="224, 64, 10" MarkerSize="5">

</asp:Series>

</Series>

<asp:ChartArea Name="ChartArea1" BackColor="64, 165, 191, 228" BackSecondaryColor="White"

BorderColor="64, 64, 64, 64" ShadowColor="Transparent" BackGradientStyle="TopBottom">

</AxisY>

<AxisX IsLabelAutoFit="False" LineColor="64, 64, 64, 64" Title="Facility" ArrowStyle="Triangle"

Interval="1">

</AxisX>

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

</td>

</tr>

</table>

</div>

Code Behind :

Alternatively, you can bind data by using the Chart control's DataSource property. This involves retrieving the data from the database (or from wherever you get the data to display), assigning it to the DataSource property, and calling the Chart's DataBind method. Unlike with the DataBindTable method, when using the DataSource property you need to define a series and specify the name of the properties in the data that are to be displayed in the X and Y values in the series.

SqlConnection con=new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);

SqlConnection con = new SqlConnection(new ConnectionString().getConnectionString());

SqlDataAdapter da = new SqlDataAdapter();

DataSet ds = new DataSet();

da = new SqlDataAdapter("exec StoredProcedure", con);

da.Fill(ds, "EmpDataDump");

if (ds.Tables["EmpDataDump"].Rows.Count > 0)

{

Chart1.DataSource = ds.Tables["EmpDataDump"];

// Set series members names for the X and Y values

Chart1.Series["EmpCount"].XValueMember = "City";

Chart1.Series["EmpCount"].YValueMembers = "EmpCount";

Chart1.Series["EmpCount"].IsValueShownAsLabel = true;

if (ChartType.SelectedItem.ToString() == "Bar")

{

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Bar;

Chart1.Titles[1].Text = "Bar Chart";

}

else if (ChartType.SelectedItem.ToString() == "Pie")

{

Chart1.Series["EmpCount"]["3DLabelLineSize"] = "100";

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 15;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Perspective = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsRightAngleAxes = false;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.WallWidth = 0;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsClustered = false;

Chart1.Series[0]["PieDrawingStyle"] = "SoftEdge";

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Pie;

Chart1.Series["EmpCount"]["PieLabelStyle"] = "OutsideInColumn";

Chart1.Series["EmpCount"]["PieOutsideLabelPlacement"] = "Right";

Chart1.Titles[1].Text = "Pie Chart";

}

else if (ChartType.SelectedItem.ToString() == "Line")

{

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Line;

Chart1.Titles[1].Text = "Line Chart";

}

else if (ChartType.SelectedItem.ToString() == "Funnel")

{

Chart1.Series["EmpCount"]["FunnelStyle"] = "YIsHeight";

Chart1.Series["EmpCount"]["FunnelLabelStyle"] = "OutsideInColumn";

Chart1.Series["EmpCount"]["FunnelOutsideLabelPlacement"] = "Right";

Chart1.Series["EmpCount"]["FunnelPointGap"] = "1";

Chart1.Series["EmpCount"]["Funnel3DDrawingStyle"] = "SoftEdge";

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Funnel;

Chart1.Series["EmpCount"]["Funnel3DRotationAngle"] = "5";

Chart1.Series["EmpCount"]["Funnel3DDrawingStyle"] = "CircularBase";

Chart1.Series["EmpCount"]["FunnelMinPointHeight"] = "0";

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 15;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Perspective = 10;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsRightAngleAxes = false;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.WallWidth = 0;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsClustered = false;

Chart1.Titles[1].Text = "Funnel Chart";

}

else if (ChartType.SelectedItem.ToString() == "Area")

{

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Area;

Chart1.Titles[1].Text = "Area Chart";

}

else if (ChartType.SelectedItem.ToString() == "Pyramid")

{

Chart1.Series["EmpCount"]["PyramidLabelStyle"] = "OutsideInColumn";

Chart1.Series["EmpCount"]["PyramidPointGap"] = "1";

Chart1.Series["EmpCount"]["PyramidMinPointHeight"] = "0";

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

Chart1.Series["EmpCount"]["Pyramid3DRotationAngle"] = "5";

Chart1.Series["EmpCount"]["Pyramid3DDrawingStyle"] = "SquareBase";

Chart1.Series["EmpCount"]["PyramidValueType"] = "Linear";

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Pyramid;

Chart1.Titles[1].Text = "Pyramid Chart";

}

else

{

Chart1.Series["EmpCount"].ChartType = SeriesChartType.Column;

Chart1.Titles[1].Text = "Column Chart";

}

// Data bind to the selected data source

Chart1.DataBind();

}

The resulting chart, when viewed through a browser, is shown below.

Column Chart:

Bar Chart:

Pyramid: (3D Chart)

Area:(3D Chart)

Pie:(3D Chart)

Line:

Funnel:(3D Chart)

Microsoft .NET

06 February 2012

MS Chart Control: Getting Started

3 comments: