Chart Controls in Asp.net

open Visual Studio 2008. In the Data tab on the Toolbox, observe the new ‘Chart’ control.
 

To get started, let us create a sample application using the Chart control:

Step 1: Drag and drop the Chart control from the Toolbox to the Design surface of Default.aspx. You will see a ‘Column chart’ which looks similar to the following:

 

 

If you click on the ‘Source’ view of the page, you find the following mark up added to the page:

<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

 

        <asp:Chart ID="Chart1" runat="server">

            <Series>

                <asp:Series Name="Series1">

                </asp:Series>

            </Series>

            <ChartAreas>

                <asp:ChartArea Name="ChartArea1">

                </asp:ChartArea>

            </ChartAreas>

        </asp:Chart>

By default the ChartType is ‘Column’. In order to change the Chart Type to either Line, Bar, Pie or any of these 25 chart types; with the Chart control selected, go to the Properties window > go to ‘Series’ > Click on the ellipse button(…) > in the ‘Series Collection Editor’, click on the ‘ChartType’ to view and select a different chart type as shown below:

 

For this demonstration, we will keep the ChartType to the default ‘Column’.

We will be binding the chart to some data. For this purpose, we will be using the SqlDataSource.

Step 2: Click on the smart tag or right click Chart > Show Smart Tag > Choose a DataSource > New Data Source… > Select Database. We will keep the default ID for SqlDataSource, SqlDataSource1 and click OK.

Step 3: On clicking OK, you will be presented with a ‘Configure Data Source’ wizard. Click on ‘New Connection’ to open the ‘Add Connection’. Type your ‘Server Name’ and ‘Select a database Name’ to connect to. Over here, I have typed (local) as the ServerName and the database I am connecting to is ‘Northwind’. Click on ‘Test Connection’ to make sure that there are no errors connecting to the server. Click Ok.

Step 4: In your ‘Configure Data Source’, click Next. An option will be displayed for saving the connection string to the configuration file. Select the checkbox ‘Yes, save this connection as:’ , type a name for the connectionstring ‘NorthwindConnectionString’ and click Next.

Step 5: In the ‘Configure Select Statement’ > select ‘Specify a Custom SQL Statement or stored procedure’ > click Next

 

Type the SQL query to ‘list the count of products in a category’ as shown below:

SELECT CategoryName, COUNT(*) AS ProductCount FROM Products JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY CategoryName

 

Click Next > Finish.

Step 6: Select the Chart control > Go to the Properties window > ChartAreas property and click the ellipse (…) button to open the ChartArea collection editor. Go to the ‘Axes’ property in the ChartArea Collection Editor and click the ellipse (…) button to open the Axis collection editor as shown below:

 

Set the ‘Title’ of the X axis to ‘Categories’ and the ‘Title’ of the Y axis to ‘Product Count’. Click OK to close the Axis Collection Editor and an OK again to close the ChartArea Collection Editor.

With the Chart control selected, go to the Series property in the Properties window and click the ellipse (…) button to open the Series collection editor. Go to the Data Source section and add the XValueMember as ‘CategoryName’ and YValueMembers to ‘ProductCount’. Also set the ‘IsValueShownAsLabel’ to True to display the value of ProductCount on the columns. Click OK

 

 

Step 7: With the properties set, run the application. You will see a chart as displayed below: