ASP.NET 4 – Exploring the inbuilt Chart Control in VS 2010

by jask2002 28. August 2012 23:53

ASP.NET 4 introduces the inbuilt charting controls for the Web Forms with Visual Studio 2010. These controls were available as a separate download and can be used with Visual Studio 2008.

Here are the steps to add the chart to your application:

  • Add the Chart control to you page The Chart control is available under the Toolbox -> Data.

clip_image001

 

Either double click the “Chart” control or drag it over to web form. And this should look like this:

 

image

 

Now we need to choose the Data Source for the control. Click on the “Choose Data Source” drop down and select “< New data source…> and this should bring the window like this:

clip_image005

Select Database and click “Ok”.

In the next screen, create a new connection or select the existing connection. I choose the connection to the Northwind database. This should look like this:

clip_image007

Click “Next > ” button. The next screen will ask you to save the connection string to the configuration file:

clip_image009

Click “Next >” button and this should look like this:

clip_image011

Now you need to choose table name for the Chart control. You can also construct your own query. To keep it simple, I selected the “Category Sales for 1997”. Now click “Next >” to go to the next screen. This should look like this:

clip_image013

If you click the “Test Query” button, it will show the rows from the selected Table. Click “Finish” to complete this wizard. This should come like this:

clip_image014

To keep it simple, I keep the “Chart Type” as “Column”. Now we need to define the Data Members for X and Y axis. If you are using a different table or database, choose members as per your requirement. I choose “CategoryName” for X Value member and “CategorySales” for Y value member.

Now browse the webpage to see the results and this should look like this:

clip_image015

Here the generated HTML markup

clip_image016

How to draw a Chart programmatically

Drawing the charts programmatically is equally easy and it provides lots of flexibility to the users. Let’s try it now. In this demonstration, we will use a DataTable as a DataSource for the Chart control. Let’s have a look at the data we have in the DataTable.

Month

Ice Cream

Milk

Curd

       

Jan

5000

4566

5622

Feb

5454

6520

4569

Mar

4520

5566

6852

Apr

6582

5896

6982

May

6589

5586

4895

Jun

5689

4686

4823

Here is the code which will populate the Data in a DataTable:

// Returns a DataTable

static DataTable PopulateTable()

{

DataTable table = new DataTable();
table.Columns.Add("Month", typeof(string));
table.Columns.Add("IceCream", typeof(int));
table.Columns.Add("Milk", typeof(int));
table.Columns.Add("Curd", typeof(int));
table.Rows.Add("Jan", 5000, 4566, 5622);
table.Rows.Add("Feb", 5454, 6520, 4569);
table.Rows.Add("Mar", 4520, 5566, 6852);
table.Rows.Add("Apr", 6582, 5896, 6982);
table.Rows.Add("May", 6589, 5586, 4895);
table.Rows.Add("Jun", 5689, 4686, 4823);

return table;

}

Add the Chart Control to the Web form

Drag the chart control on the Web form and keep the default name. This should look like this:

clip_image017

Now open the .CS file and navigate to the Page_load event of the page and add the following code:

protected void Page_Load(object sender, EventArgs e)

{

// Populate Sales Data

// This DataTable consist of 6 rows with 4 Column 

DataTable dtSales = PopulateTable();

// Set the DataSource of Chart1 Control

Chart1.DataSource = dtSales;

// Assign the X & Y Value Member

Chart1.Series[0].XValueMember = dtSales.Columns[0].ToString(); // Month 

Chart1.Series[0].YValueMembers = dtSales.Columns[1].ToString(); // Ice Cream

// Finially Bind it

Chart1.DataBind();

}

So in this sample code, we are populating the data through the PopulateTable function. Later in the code, we are setting the value of XValueMember and YValueMembers. So far we have used just two columns of the dtSales DataTable. If you run the web page, this should look like this:

 

clip_image018

 

Although this looks very neat but it’s still not complete. We only see the value for one Column here. In other word, this shows the data for one series. Let’s add remaining columns to complete the Chart. To add another value, we need to add another series. Add the following code after the DataBind line:

// Add a new Series to show the Values of Milk and Curd

Chart1.Series.Add("Series2");
Chart1.Series[1].XValueMember = dtSales.Columns[0].ToString(); // Month
Chart1.Series[1].YValueMembers = dtSales.Columns[2].ToString(); // Milk
Chart1.Series.Add("Series3");
Chart1.Series[2].XValueMember = dtSales.Columns[0].ToString(); // Month
Chart1.Series[2].YValueMembers = dtSales.Columns[3].ToString(); // Curd

 

Now Page_load event should look like this:

protected void Page_Load(object sender, EventArgs e)

{

// Populate Sales Data

// This DataTable consist of 6 rows with 4 Column 

DataTable dtSales = PopulateTable();

// Set the DataSource of Chart1 Control

Chart1.DataSource = dtSales;

// Assign the X & Y Value Member

Chart1.Series[0].XValueMember = dtSales.Columns[0].ToString(); // Month 

Chart1.Series[0].YValueMembers = dtSales.Columns[1].ToString(); // Ice Cream

// Add a new Series to show the Values of Milk and Curd 

Chart1.Series.Add("Series2");

Chart1.Series[1].XValueMember = dtSales.Columns[0].ToString(); // Month

Chart1.Series[1].YValueMembers = dtSales.Columns[2].ToString(); // Milk

Chart1.Series.Add("Series3");

Chart1.Series[2].XValueMember = dtSales.Columns[0].ToString(); // Month

Chart1.Series[2].YValueMembers = dtSales.Columns[3].ToString(); // Curd

// Finially Bind it

Chart1.DataBind();

}

Let’s browse the page to see how it draws the Chart. This should look like this:

clip_image019

 

Now it shows the values from all the columns. But this is still not complete. A user cannot tell which bar represent to which product just by looking at the Chart. We need to show some more information. Let’s add the following code before the DataBind:

// Add the Legend

Chart1.Legends.Add("Legend1");

Chart1.Legends[0].Title = "Legends";

// Titling the Series

Chart1.Series[0].LegendText = "Ice Cream";

Chart1.Series[1].LegendText = "Milk";

Chart1.Series[2].LegendText = "Curd";

// Titles for the Chart

Chart1.ChartAreas[0].AxisX.Title = "Months";

Chart1.ChartAreas[0].AxisY.Title = "Sales in Units";

This will add the Legends to the Chart. Once you browse this, it should look like this:

clip_image020

Legend Positioning

You can use docking to change the Legend’s position. This statement will place the Legend at bottom.

// Change the Legend's position

Chart1.Legends[0].Docking = Docking.Bottom;

clip_image021

Different Chart Type and how to use them

ASP.NET 4 provides different type of charts. You can choose different charts programmatically. It’s really important to remember that different series can have different chart types. Let’s add the following code in the page_load event and browse the page:

// Use a different ChartType

Chart1.Series[0].ChartType = SeriesChartType.Line;

clip_image022

As you can see the output, two of the series are still using the old chart type but first series is using the Line chart.

3D Charts

User can have the 3D charts as well. Add the following line to the Page_Load event and browse the page again:

Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;


clip_image023

Useful Links

Samples Code for .NET Framework 4 Chart Controls Released!

You can now download Visual Studio 2010 projects(code) that contain all the samples targeting .NET Framework 4(Web and WinForm)

http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418


PayPal — The safer, easier way to pay online. Has this post helped you? Saved you? If you'd like to show your appreciation. Please buy me a coffee or make a small contribution toward blog's maintenance(to keep it Ads free )

Tags: , ,

.Net | C# | ASP.Net

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About me

Hi there,

My name is  Jas and I'm currently working with Microsoft IIS/ASP.Net Escalation services.  Services

 

Tag cloud

Month List

RecentComments

Comment RSS

TextBox

 

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.