Join Jess Chadwick for an in-depth discussion in this video Displaying data with a chart, part of Up and Running with WebMatrix and ASP.NET.
Charts are an effective way to show data to your users. In this video, I'll show you how to use the WebMatrix chart helper to generate over 30 kinds of charts using data from a database. In this page, I show how to use the chart helper to create a chart and save it to a file. First, I specify the file name. I'm saving the image files to a folder on our site named ChartImages. Next, I create a new chart, I specify a width and a height. Then, I pass a series of X and Y values via the AddSeries method.
This specifies the data that will be shown in our chart. Finally, I save the chart to an intermediate image. Once this image is created, I can refer to it via an image tag in our page. When I run the page, you can see the data points generated as a chart. In addition to specifying the data that will be used to generate your chart, the chart helper also allows you to customize how your chart looks. For example, you can add a title using the AddTitle method.
This will add a title to the top of the image. You can also make your charts look more appealing by using the theme parameter to apply a theme. Here, I've applied the green theme to the chart. When I run the page again, you can see the theme has been applied. In this example, I've hard-coded the charting data right into the page. This example shows the chart helper in action, but the helper becomes even more useful when you generate charts using data from a database.
In order to do this, I will first switch to my Database view. Then, I will select my database and click New Query to generate a new Query Builder. I can use this Query Builder to help create my SQL query. The Query Builder allows you to test your SQL queries before running them in your code. Here, I can execute my query and see the results in the window below. Once I am happy with my query, I can return to my page and begin using it. First, I will open a connection to the blog database just as I've shown in previous videos, then I'll execute my query and save it into the postsByAuthor variable.
Once I retrieve this data from the database, I can use it to replace the hard-coded data. Here, I've replaced the X value and Y values parameters with the data that I've retrieved from my database. Then, I've added the X field and Y fields parameters to indicate which columns of the data I would like to show for the X and Y axes. Before I run this page, I am going to want to update the title.
I will change the title from Sales By Employee to Posts by Author. When I run the page again, we can see the data from the database shown in the chart. In addition to saving chart images to intermediate files, the chart helper also supports the Write method which allows you to write the image directly to the response. When you use the ChartWrite method in a page by itself, you can then use that page as the source of image tags in other pages.
Here, I've created a new page with an Image tag that refers to the new Posts By Author page that we just created. By default, the chart helper generates a bar chart but it is actually able to generate many kinds of charts. You can specify the type of chart to generate by adding the chart type parameter to the AddSeries method. Here I've indicated that instead of the default bar chart, this page should instead render a pie chart. I've created a page named AllCharts that includes a list of all of the available chart types.
I then cycle through each of these chart types and call our Posts By Author page, and pass the type of the chart as a query string parameter. Then, I can update our Posts By Author page to read the chart type from the request. When I run this page, we see a list of all of the available chart types that WebMatrix supports. Charts are an effective way to display lots of data in an organized manner. In this video, I've shown that the chart helper can be used to generate many kinds of charts using data retrieved from a database.
- Exploring the WebMatrix integrated development environment
- Inspecting the server environment
- Installing WordPress, Joomla! and nopCommerce templates
- Declaring and using variables and collections of values
- Using helper methods
- Creating a content page that uses a layout file
- Adding sections of content
- Creating reusable components
- Integrating social media with the Web Helpers Library
- Displaying data in a grid or chart
- Using CAPTCHA to protect forms
- Executing code before every page loads
- Configuring an email server and sending email
- Allowing users to create accounts and log in
- Caching data, pages, and resources in the browser to increase speed
- Adding live site analysis with Google Analytics
- Deploying a web site