4GuysFromRolla.com :: Using Microsoft's Chart Controls In An ASP.NET Application

Using Microsoft's Chart Controls In An ASP.NET Application: Exporting Charts

Wed, 06 Oct 2010 00:00:00 GMT

The Chart Web control makes it easy to display a chart in an ASP.NET web page - simply drag the Chart control onto the page, set a few properties and either bind it to a data source control or write a few lines of code that get and bind the data of interest. When a page with a Chart control is visited by a user, the Chart control renders an element on the page that displays the rendered chart.

The Chart control is great for displaying a chart on a web page, but what if a user wants to view that chart offline, or send the chart to a colleague? In an earlier installment, Programmatically Generating Chart Images, we examined a number of ways to generate the chart image programmatically. This technique is useful if you want to modify the chart image before displaying it (to, say, add a watermark) or if you want to send the chart to a recipient via email. This technique can also be used to allow the visitor to export the chart image into an alternative format.

This article shows how to let users export a chart from a web page to an alternative format. Specifically, we'll look at adding an "Export" button to the chart web page that, when clicked, exports the chart displayed in the web page to either an image file that can be downloaded or as a PDF file. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Using the Chart Controls with ASP.NET MVC

Wed, 22 Sep 2010 00:00:00 GMT

The Microsoft Chart controls are a series of classes in the System.Web.UI.DataVisualization.Charting namespace that allow web developers to ability to add charts to their ASP.NET applications. The most pertinent charting-related class is the Chart class, which contains information about the chart's appearance, series, charting areas, and so forth. In most of the demos and code samples we've explored thus far, we've used the Chart class as a Web control, adding the declarative markup to our ASP.NET page, setting a few properties and, occasionally, writing a few lines of code. When used as a Web control, the Chart class both creates the chart (as an image) and then renders an <img> element that points to the generated chart image.

Using the Chart Web control is a standard practice in a WebForms application, but it is not suggested when building an ASP.NET MVC application. (While it is possible to add Web controls - including the Chat Web control - to the views of an ASP.NET MVC application, it is generally frowned upon.) So, if we can't use the Chart Web control in an ASP.NET MVC application, how do we display a chart? In addition to being used as a Web control, the Chart class can also be used programmatically. It is quite possible to create a new Chart object, set some properties, plot the data points, and then generate the chart image. In fact, we looked at using this technique in an earlier installment, Programmatically Generating Chart Images, in which we saw (among other things) how to generate chart images programmatically and add them as attachments in an email message.

This article explores how to display charts in an ASP.NET MVC application. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Serializing Chart Data

Wed, 10 Feb 2010 00:00:00 GMT

In most usage scenarios, the data displayed in a Microsoft Chart control comes from some dynamic source, such as from a database query. The appearance of the chart can be modified dynamically, as well; past installments in this article series showed how to programmatically customize the axes, labels, and other appearance-related settings. However, it is possible to statically define the chart's data and appearance strictly through the control's declarative markup. One of the demos examined in the Getting Started article rendered a column chart with seven columns whose labels and values were defined statically in the tag's collection.

Given this functionality, it should come as no surprise that the Microsoft Chart Controls also support serialization. Serialization is the process of persisting the state of a control or an object to some other medium, such as to disk. Deserialization is the inverse process, and involves taking the persisted data and recreating the control or object. With just a few lines of code you can persist the appearance settings, the data, or both to a file on disk or to any stream. Likewise, it takes just a few lines of codes to reconstitute a chart from the persisted information.

This article shows how to use the Microsoft Chart Control's serialization functionality by examining a demo application that allows users to create custom charts, specifying the data to plot and some appearance-related settings. The user can then save a "snapshot" of this chart, which persists its appearance and data to a record in a database. From another page, users can view these saved chart snapshots. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Enhancing Charts With Ajax

Wed, 16 Dec 2009 00:00:00 GMT

Charts are typically used to provide a static snapshot of data. The chart's underlying data might be based on various user inputs, but in the end the chart, once rendered, represents the end of the reporting workflow. However, other scenarios allow for a more interactive user experience. For example, in the Creating Drill Down Reports article we looked at how to configure the Chart control to allow the user to drill into a particular data point. Specifically, the demo contained a column chart showing the number of products in each category in the Northwind database. Clicking on a column whisked the user to a new page that details about the products in that category. Also, in certain situations the data populating the chart might be arriving from a sensor or some other source that is constantly being updated. In that case, we might want a real time chart whose data is periodically (and automatically) refreshed to show the latest data.

Ajax is a set of related techniques used in websites to build more interactive and responsive applications. Microsoft's ASP.NET Ajax Framework offers developers both server- and client-side frameworks for developing Ajax-enabled applications. This article looks at how to use Ajax with the Microsoft Chart controls, focusing on two demos. In the first we'll create a drill down report with a column chart that shows the gross sales per month for a particular category and fiscal year. The user can click on a particular column in the chart to see the breakdown of sales per day in that month on the same page. This breakdown is displayed in an UpdatePanel, and clicking on a column in the chart triggers an asynchronous postback. The other demo looks at using the Timer control to render a real time chart.

Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Adding Statistical Formulas

Wed, 18 Nov 2009 00:00:00 GMT

The Microsoft Chart controls make it easy to take data from a database or some other data store and present it as a chart. As discussed in Plotting Chart Data, the Chart controls offer a myriad of ways to get data into a chart. You can add the data programmatically, point-by-point, or you can bind an ADO.NET DataTable directly to the Chart. You can even use declarative data source controls, like the SqlDataSource or ObjectDataSource controls.

In addition to converting your specified data points into a chart image, the Chart controls also include a wealth of statistical formulae that you can use to analyze the plotted data. For example, with a single line of code you determine the mean (average) value for data in a particular series. Likewise, with one line of code you can get the median, variance, or standard deviation. These values can be displayed as text on the page or as a stripe line on the chart itself. What's more, the Chart controls include functions to forecast future values, to compute moving averages, to identify trends, and to determine rates of change, among others.

This article looks at how to use two statistical formulae. Specifically, we'll look at how to compute and display the mean of a series, as well as how to display an exponential trend line on the chart to forecast future values. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Creating Drill Down Reports

Wed, 28 Oct 2009 00:00:00 GMT

Each series in a chart is composed of a set of data points, which are modeled via the DataPoint class. For most chart types, the two key attributes of a data point are its X and Y value. For example, in a line chart the X value indicates the position of the data point along the X axis, while the Y value represents the position of the data point along the Y axis. Ditto for a column chart, although it may help to think of the Y value as the height of the column.

In addition to X and Y values, data points can include additional bits of information, including an associated URL. As you would expect, when a data point has an associated URL it becomes click-able in the rendered chart image, and clicking the data point whisks the user to the specified URL. By specifying URLs, it's possible to create drill down reports, which are reports that let the user click a particular data point in a chart to explore its details.

This article examines how to build drill down reports. Specifically, we'll walk through two demos that display the same data using a column chart. The charts' X axes list the categories in the Northwind database's Categories table, with the height of each category's column indicating the number of products associated with said category. Clicking on one of these columns in the chart takes the user to a second web page, which displays a grid showing the products that belong to the selected category. The second demo enhances the chart to display the corresponding category's products when hovering the mouse over the category column. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Programmatically Generating Chart Images

Wed, 30 Sep 2009 00:00:00 GMT

The Microsoft Chart controls demos we have examined so far all use the Chart Web control to position the chart image on the web page and to configure a number of its stylistic settings. For example, while the Plotting Chart Data article showed several demos illustrating the different ways to specify the points to plot on the chart surface, all of these demos used a Chart Web control to indicate where on the page the chart should appear, along with its dimensions, its series, its chart areas, its colors, and so on. While the Chart Web control makes it easy to get started with the chart, it is not necessary. From the ASP.NET page's code-behind class you can: programmatically create a Chart object; specify its width, height, colors, and other display-related properties; plot the charts data points through any of the mechanisms discussed in Plotting Chart Data; and generate an image for the chart in a number of different image formats, saving the image data to a file or to a stream.

Being able to programmatically configure the chart and generate the chart image is useful if you want to modify the chart image in some way before displaying it. Perhaps you want to add a watermark, or embed it inside a PDF file. Maybe you don't want to display it at all, but instead want to send it as an attachment in an email, or save the image to the web server's file system or to the database. Whatever the scenario, the good news is that the Microsoft Chart controls make it easy to programmatically create, customize, and generate the chart image.

This article looks at how to programmatically create a chart. Specifically, we'll see how to dynamically add a watermark to the generated chart image, as well as how to email the chart to a recipient. The demos in this installment do not use the Chart Web control at all; instead, the charts in these demos are created and rendered directly from the ASP.NET pages' code-behind classes. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Sorting and Filtering Chart Data

Wed, 23 Sep 2009 00:00:00 GMT

The Microsoft Chart controls make it easy to take data - such as sales numbers, website traffic statistics, and so on - and turn it into a chart, which can be saved to an image file or displayed from a web page. In Plotting Chart Data we examined a myriad of ways to turn data into a chart, including: plotting the chart data point by point; binding data to the Chart's Points collection; programmatically binding data structured data to the chart; and declaratively binding data using one of ASP.NET's data source controls, such as the SqlDataSource or ObjectDataSource.

Oftentimes, web pages that display charts include user interface elements that let the user filter or sort the plotted data. For example, when viewing a chart of expenses, the user may want to only show expenses between two dates, or may want to sort the expenses by category. One way to provide such functionality is to sort or filter the data before binding it to the chart. Alternatively, you can bind the original data to the chart and then instruct the Chart control to sort the data, or to apply a filter. This article shows how to use these sorting and filtering capabilities. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Rendering the Chart

Wed, 19 Aug 2009 00:00:00 GMT

The Microsoft Chart Controls provide ASP.NET developers with an API and a Web control for creating and displaying charts in a web page. Behind the scenes, the Microsoft Chart Controls take the data to be plotted and dynamically generates an image. This image can be generated using one of three techniques: the Chart Web control can generate the image and save it to the web server's file system in a specified location; the Chart control can generate the image and store it in memory, session, or elsewhere, and have that image served by a built-in HTTP Handler, ChartHttpHandler; or the Chart control can send back the binary contents of the chart image directly to the browser. The chart image can be rendered using one of four image types: PNG, JPG, BMP, or EMF. And when rendering a JPG you can specify its compression level.

Regardless of the image file type and the technique used to generate the image, the Chart Web control renders an <img> element whose src attribute references the image (or the image-producing HTTP Handler or ASP.NET page). When a browser requests a web page with a Chart control on it, it receives this <img> element as part of the page's rendered markup and then makes a request to the URL specified in the src attribute (just like it does for any other image on a web page). The chart image file the browser requests either already exists in which case its contents are returned, or the image is dynamically-generated. Either way, the end result is that the browser is sent back the chart as an image file, which is displays.

This article explores the three different techniques the Microsoft Chart Controls has at its disposal for generating chart images. We'll look at how to use each option, enumerate the pros and cons, and discuss when to consider using one option over another. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Plotting Chart Data

Wed, 29 Jul 2009 00:00:00 GMT

The Microsoft Chart Controls enable developers to specify chart data in a number of ways. Chart data may be specified statically via the Chart Web control's declarative markup. Chart data may also be specified programmatically using a variety of techniques. For starters, you can add the points to plot one at a time via the Points collection's AddXY method. The Chart Controls API offers methods for binding enumerable data to the chart in one line of code. For example, you can pass an enumerable data source (such as a SqlDataReader) into the Chart control's DataBindTable method. Alternatively, you can assign data to the Chart's controls DataSource property and then call its DataBind method.

The first installment in this article series - Getting Started - showed some simple examples of plotting chart data. This article delves into more intricate examples, showing how to plot database data, data from an XML file, and data from other types of data sources. We'll also look at plotting data using a library created by K. Scott Allen for his MSDN Magazine article, Charting With ASP.NET And LINQ. Read on to learn more!

Using Microsoft's Chart Controls In An ASP.NET Application: Getting Started

Wed, 22 Jul 2009 00:00:00 GMT

A picture is worth a 1,000 words... This adage rings especially true when it comes to reporting. Charts summarize and illuminate patterns in data in a way that long tables of numbers simply cannot. Web developers have long searched for ways to express numerical data in a graphical format; until recently, doing so required the use of an open source or third-party charting or reporting package or some homegrown technique using HTML, GDI+, or some other technology. In September 2008 Microsoft released a free charting suite named Microsoft Chart Controls for the .NET Framework 3.5 SP1.

The Microsoft Chart Controls are an encompassing set of charts for WinForms and ASP.NET applications. Despite being a first release, the Chart Controls suite offers a wide array of chart types and charting features. The Chart Controls offer all of the standard chart types - line charts, bar charts, pie charts, and so forth - as well as more specialized ones, like pyramid and bubble charts. The Chart Controls suite offers a comprehensive set of charting features, including support for multiple series, customizable legends, trend lines, and labels. And the Chart Controls API makes it easy to sort, search, filter, group, and export the chart data. Unfortunately, this first version of the Chart Controls has limited support for customizing the chart from the Designer. There are no wizards to guide you through customizing the chart's look and feel and specifying its data source. Instead, you have to set the properties and bind the chart data yourself.

While the Microsoft Chart Controls have some rough edges, their cost (free), number of chart types, and array of supported charting features make them an excellent choice for adding charts to an ASP.NET web application. This article, the first in a series of articles on the Chart Controls, shows how to download, install, and get started using the Microsoft Chart Controls. Future installments will explore the Chart Controls in more detail and explore more advanced features. Read on to learn more!