Creating a basic Chart Control in ASP.NET 4.0
See more tutorials in Charts. This post has Comments Off on Creating a basic Chart Control in ASP.NET 4.0.
Creating a basic Chart Control in ASP .NET 4.0
The purpose of this tutorial is to explain how to create a simple chart control and have it grab data
from a database. We will create a very simple Table inside our database that will show the productivity
of an imaginary worker. We will then display them on a chart for a better view of how he/she is doing.
1. Create the Database and Table
2. Create a Column Chart Control
3. Tweaking the Chart to look more professional
Create the Database and Table
1. Right click on your project in Solution Explorer and
navigate to ->Add ->New Item
2. Select SQL Server Database from the window that pops up.
3. Name the Database Productivity.mdf
4. Open Productivity.mdf by double clicking it
5. Add two new columns to your table WeekID(int) and ItemsDone(int)
6. Make the WeekID column is a Primary Key for the table
right click on the WeekID column and navigate to->Set Primary Key
7. Now we can set the identity of the key so that it auto increments itself,
so Switch(Is Identity) to Yes.
8. Now we can add Data to the table so Save the table and name it Employee1
9. Now we Right Click on the Employee1 Table and navigate to
->Show Table Data.
10. Now fill out the table to reflect the Data I have filled in below. Once this is complete
we are finished Creating the SQL Table and we can then move on to creating a Chart Control.
Create a Column Chart Control
In Order to create a Chart Control we have to have a Page to put it on so let’s start with that
1. Right Click on your project and navigate to ->Add->New Item
2. Select Web Form and Name it PayRoll.aspx
3. Open up the page and go to Design View
4. Then we need to go to the Toolbar and Drag a Chart Item from the Data Section
of the Toolbox onto our Web Form. This will create a Chart Control,
but we need to link it to the database on order for it to get our information.
5. Next we need to click the Smart Tag of our object found here
6. Choose New Data Source from the Data Source Drop Down Box
7. This will bring up a wizard that will let you connect your database to your Chart
a. On the first Window Choose SQL Database and Name it Employee1
b. Choose your Connection String or have it create one for you I named mine ConnectionString
c. On the window where you select columns you should have the * selected
which means all data this is fine
d. On the final window you can choose to click the Test Query button and you should see
these results after a few seconds, if so hit Finish and you are done with linking the Chart
8. After this Click on the Chart’s Smart Tag one more time and edit the
x Value Member and Y Value Member drop down boxes to appear as below
9. At this point you should be able to run the page and see your chart with all of the data\
Tweaking the Chart
Notice that when you view the chart it has no text or labels on it, it could confuse some people
so let’s put some labels on there for the end user.
1. Right Click on the Chart and navigate to ->Properties
2. Select the Chart Areas Property under Chart and
click the ellipses button(…) next to the word (Collection)
3. Then select the ellipses button next to the Axes property on the new popup window
4. This will bring us to where we can add labels for our AxesChange the Label Property
of the X Axis to say Weeks and Change the Label Property of the Y axis to say Items Done.
5. One more step to add a Table Title will Make it look even better so Go back to the
Chart Properties and select the ellipses button next to the Titles Property
6. Click the Add button at the bottom Then change the (Text) property to say Productivity
of Employee1 Over 7 Weeks
7. Now your table should look much better when you Load the Page
In this example we created a SQL Data Source, created a Chart Control, displayed it on a page,
and then tweaked it to look more professional. Charts can be very useful if done right, and they
are simple to create and edit once you get the hang of it.