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.
Either double click the “Chart” control or drag it over to web form. And this should look like this:
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:
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:
Click “Next > ” button. The next screen will ask you to save the connection string to the configuration file:
Click “Next >” button and this should look like this:
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:
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:
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:
Here the generated HTML markup
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:
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:
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:
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:
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;
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;
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;
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
Subscribe