Today I want to share about creating charts in ASP.NET web form. There are a lot of awesome chart controls available out there such as Infragistic and Telerik. As you might know, you need to pay for the license to use those 3rd party chart controls. If you have budget constraint, you may opt for free chart control such as Microsoft (MS) Chart.
By default, MS Chart is built-in with Visual Studio 2010 or later. It is under Data category in the design toolbox. MS Chart is available for Winform and Webform.
Chart is useful when you are creating a dashboard or report page. Before you begin creating a chart, you need to have a database with data ready first. In this article, I cover the steps to create a basic nice looking chart which connecting to a SQL server database without writing a single line of code:
I am using a simple address book database containing a contact list for this article. I am creating a pie chart displaying the count of gender from my contact list.
Enter database connection info.
Give a name to the new connect string.
Create a custom SQL statement to display the count of gender.
The query should return only 2 columns, one for X axis and another for Y axis.
I am setting up gender as X axis, and the count as Y axis.
Configure the X Value Member as Gender.
Configure the Y Value Member as Count.
That's it. You can test run your web application, the chart should display now.
I know it look plain and "fugly", we can make it look nicer and customize it to be more meaningful or user friendly.
Locate the Area3DStyle property, then set the Enable 3D value to true.
Go to the Series in properties window.
You can ether type the reserved keyword #VAL in the ToolTip property, or you can click the small button there to insert the correct keyword for you.
Click the Insert New Keyword button, then choose the Y value since you want to display that Y value in the pie area.
Click the OK button and you are done.
Your pie chart should look like this now, and when you mouse over to the pie, you can see the actual Y value in the tooltip.
Set the Legend title.
Now you can see the legend in your chart, however, it looks like duplicate. Therefore, you can remove the label or replace it with the Y value in the pie.
Enter the detail page url with the dynamic value. My detail page expect query string named filter. #VALX is the X value which is Male or Female. When the detail page receive the male value, it will display all the contacts with male gender only.
If you want to know all the supported dynamic value or keywords, you can always go to the Keyword Editor to get them.
Once you are done with the configuration, test it out, you will notice the chart is now clickable and the url is formed dynamically.
Clicking the pie will redirect you to the detail page.
By the way, this is my first post of the year 2015. Happy new year everyone!
By default, MS Chart is built-in with Visual Studio 2010 or later. It is under Data category in the design toolbox. MS Chart is available for Winform and Webform.
I am using a simple address book database containing a contact list for this article. I am creating a pie chart displaying the count of gender from my contact list.
Create Basic Chart
First, drag the chart control from the toolbox to your web page design pane. Then, create a new data source.Configure Data Source Control
Enter a data source name.Enter database connection info.
Give a name to the new connect string.
Create a custom SQL statement to display the count of gender.
The query should return only 2 columns, one for X axis and another for Y axis.
I am setting up gender as X axis, and the count as Y axis.
Configure Chart
Back to the chart control, change the chart type to "Pie". Here you can change to any chart type if you do not like pie.Configure the X Value Member as Gender.
Configure the Y Value Member as Count.
That's it. You can test run your web application, the chart should display now.
Change to 3D
We can change the chart to become 3D by customizing the Chart Areas in the properties window.
Display Value in the Pie Area Tooltip
As you can see the pie chart does not show the value in the pie. It is not user friendly and user can never know the actual Y value. Here is how you want to do if you want to let user mouse over to the pie to see the Y value in the tooltip.
Go to the Series in properties window.
You can ether type the reserved keyword #VAL in the ToolTip property, or you can click the small button there to insert the correct keyword for you.
Click the OK button and you are done.
Your pie chart should look like this now, and when you mouse over to the pie, you can see the actual Y value in the tooltip.
Show Legends
Let's further decorating the chart by adding legend. Go to the Legends in the chart properties window.
Now you can see the legend in your chart, however, it looks like duplicate. Therefore, you can remove the label or replace it with the Y value in the pie.
Replace the Label with Y Value in the Pie
Go back to the same Series properties windows, locate the IsValueShownAsLabel property and then set it to true.Customize Label
Alternatively, you can display the Y value next to the X value by setting the Label in such format #VALX (#VAL).Enable Hyperlink in the Pie Area
Imagine that the chart is clickable, and it will bring the user to another page which displaying the detail information. You can enable hyperlink in the pie area.
Go back to the same Series properties window, locate Url property under MapArea category.
Enter the detail page url with the dynamic value. My detail page expect query string named filter. #VALX is the X value which is Male or Female. When the detail page receive the male value, it will display all the contacts with male gender only.
If you want to know all the supported dynamic value or keywords, you can always go to the Keyword Editor to get them.
Once you are done with the configuration, test it out, you will notice the chart is now clickable and the url is formed dynamically.
Clicking the pie will redirect you to the detail page.
Summary
You can do a lot more and customization with MS Chart. This article only cover the very basic chart configuration and screenshots without any coding involve. Feel free to checkout this link: http://msdn.microsoft.com/en-us/library/dd456753(v=vs.140).aspx
By the way, this is my first post of the year 2015. Happy new year everyone!
No comments:
Post a Comment