In this post I am going to present a hands on example on how to use the Chart web server control.

It is built into ASP.Net 4.0 and it is available from the Toolbox in VS 2010.It is a very rich feature control that supports many chart types, had support for 3-D chart types,supports smart data labels and client side ajax support.

 Let's move on with our example.

1) Launch VS 2010. I am using the Ultimate edition but the express edition will work fine.

2) Create an empty web site from the available templates and choose c# as the development language.

3) Add a new web form to your website.

4) In the Default.aspx page drag and drop a Chart web server control onto the form.

5) I am going to manually add some data to our chart. Have a look inside the <Points></Points> tags. Inside there I am manually adding some data for our chart.

So the full markup by now should look like this.

<div>
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
<Points>
<asp:DataPoint AxisLabel="June Orders" YValues="1234" Color="Cyan"  />
<asp:DataPoint AxisLabel="July Orders" YValues="2134" Color="Cyan" />
<asp:DataPoint AxisLabel="August Orders" YValues="3234" Color="Cyan" />
<asp:DataPoint AxisLabel="September Orders" YValues="3354" Color="Cyan" />
<asp:DataPoint AxisLabel="October Orders" YValues="3735" Color="Cyan" />
<asp:DataPoint AxisLabel="November Orders" YValues="4234" Color="Cyan" />
                
</Points>
 
</asp:Series>
</Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>

6) Run your application and see the chart with all its data appearing on the screen.

7) In this step we will make the chart 3D and will add a legend .

The snippet for this markup will look like this

  </Series>
  <ChartAreas>
  <asp:ChartArea Name="ChartArea1" BackColor="Gray">
  <Area3DStyle Enable3D="true" Rotation="20"
  IsRightAngleAxes="true" IsClustered="true"
  />
  </asp:ChartArea>
  </ChartAreas>
<Legends>
   <asp:Legend Name="MyLegend" Title="OrdersCount" Alignment="Far" 

ForeColor="Black" BackColor="Azure" />
</Legends>
</asp:Chart>

Run your application again and see the legend appearing and the Column chart to be 3D.

If you want to change the chart type to Bar you must change this line of markup

  <Series>
     <asp:Series Name="Series1" ChartType="Bar">

Run your application again and see the results.

8) Let's use some datasource and bind its data to the Chart control. Add a new web form to your site. Drag and drop a Chart control onto the form.

Obviously for this step we will need a database. I will use the Pubs database. This is a well known database and many people are familiar with its schema.You can download the Pubs database from this link. If you need some help on how to install the database have a look here .

9) Drag and drop a SqlDataSource control onto the web form. Set the DataSourceID = SqlDataSource1

10) Now we must configure the SqlDataSource. In the smart tag of the SqlDataSource control create a new connection (if you do not have already a connection pointing to the Pubs database).

In the configuration of the Select statement choose a custom SQL statement. We will want to find how many books were sold by title_ID where the total quantity is more than 35.

So the SQL statement is this one:

SELECT     SUM(qty) AS quantity, title_id
FROM         sales
GROUP BY title_id
HAVING  SUM(qty) >35

Click Next and Finish the exit the wizard.

The markup for the SqlDataSource control is 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>" 

SelectCommand="SELECT     SUM(qty) AS quantity, title_id
FROM         sales
GROUP BY title_id
HAVING  SUM(qty) &gt;35"></asp:SqlDataSource>

Change the type of the chart to Pie.

Set the X Value members to title_id and Y Value members  to quantity.The markup should look like this.

 <asp:Series Name="Series1" XValueMember="title_id" YValueMembers="quantity" 

ChartType="Pie">

11) Run your application and see the Pie chart.

There are so many features and options that you can explore yourself and I urge you to do. The Chart control was missing from the previous versions of the framework and people at Microsoft identified that and provide us with an excellent control with lots of features.

Hope it helps.