ASP.net chart control is one of the newly introduced controls to the Visual Studio IDE from Visual Studio 2010 onwards. It is a very powerful, yet easy to use server side control. Let's take an example on how to use it.
Prerequisites:
- You would need AdventureWorks database. If you don't have one, you can download an appropriate version from here.
- Visual Studio 2010.
How can I create a simple chart with ASP.net?
Well, it's easy!
- Just drag and drop a chart control to your webform.
- Click on tasks shortcut ">" on top-right corner of the chart control. On the item "Choose Data Source", select "<New data source...>".
- Select "Database" item from data source types and click ok.
- Create a new connection to SQL Server or choose one from Web.config. Remember, you should connect to "AdventureWorks" sample database.
- Select the radio button "Specify a custom SQL statement or store procedure" and click next.
- Select the radio button "SQL statement", paste the following query and click next.
SELECT TOP (10) ISNULL(Person.Contact.FirstName, '') + ' ' + ISNULL(Person.Contact.MiddleName, '') + ' ' + ISNULL(Person.Contact.LastName, '') AS [Sales Person],
Sales.SalesPerson.SalesYTD AS [Sales]
FROM HumanResources.Employee INNER JOIN
Person.Contact ON HumanResources.Employee.ContactID = Person.Contact.ContactID INNER JOIN
Sales.SalesPerson ON HumanResources.Employee.EmployeeID = Sales.SalesPerson.SalesPersonID - Click the button "Test Query" and then click finish.
- Re-size the chart control by dragging--make it more wider and a little taller.
- Click on tasks shortcut ">" on top-right corner of the chart control. On the item "X Value Member", select "Sales Person". Similarly, on "Y Value Member", select "Sales".
- Save the webform and test it!
You're Done!
Now, you can play with a variety of chart types such as "Line", "Spline", "FastLine", "Bar", "Column". Once you get your own working chart control, you can evaluate more advanced features.
