Thursday, December 11, 2008

Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Here is a HelloWorld sample on the new ASP.NET Charting control.


To begin with, install the free Microsoft Chart Controls and the "Tools for VS 2008 for Chart Controls" from here and here

Note that if you don’t install the Tools for VS 2008 for Chart controls, the Chart Server Control doesnt show up in the Toolbox

Once you are done with the installation, restart Visual Studio if you are already running the same (of course, save your work)

1. Start Visual Studio 2008 and create a File – New – ASP.NET Website or a Web Application

2. From the ToolBox, under Data tab, pick up the “Chart” control (the icon would be a series of colored bar graphs) and drag and drop it into the page.

3. Click on the smart tag for configuring the Chart control and Choose DataSource

4. Select “Database” and provide the connection string to your database server (in my case I chose Northwind)

5. Choose to save the connection string etc., and select the Database table (in my case I chose “Category Sales for 1997”)

6. Click “Finish” to complete the process.

7. Now if you run the page you will NOT get the Chart Control.

8. You need to select the Properties of the Chart Control from design view.

9. Make sure under “Data” DataSource is set to “SqlDataSource1” unless you gave a different name and DataMember is set to “DefaultView”

10. Under “Series” in Properties, click on the tab to open up the “Series Collection Editor”.

11. Scroll down the Series1 Properties to DataSource section.

12. Specify “CategoryName” as the XValueMember and “CategorySales” for YValueMembers and click Ok.

13. Build the page and hit F5 to run the page.

14. You will be able to see the Chart in your webpage.

15. Right Click on the chart and you would be able to see that it is an image generated dynamically that can be saved as a “.png” file.

You can download a comprehensive list of samples from here and verify the different implementations and source code for the same. For more details, visit the forums here

No comments: