Streaming Chart Images as FileResult from MVC Controllers

• Download demo - 324 KB

Introduction

Not a lot of server controls play nicely with the ASP.NET MVC framework; Microsoft Chart does. To implement a true MVC design pattern, the Controller should relate to the View any dependencies from the Model (data). This project shows how the Microsoft Chart controls can be streamed from the Controller into an MVC View. The article assumes a basic knowledge of the ASP.NET MVC framework (Dino Esposito article here) and the restrictions associated with using server controls (no control-level events in the code-behind and the control won’t be able to postback).

Background

The use of the Microsoft Chart in the MVC framework is fairly well documented. Code-Inside Blog International gives a good introduction here. The author's examples have been included on the first two links on the default page of the project. Reading the responses to the article, I stumbled onto an interesting post by Florian (January 18 2009 @ 10:46 pm). He states:

A third option that works very well is to have the following code in your ASPX:

<img src=”/Product/GetChart” alt=”Chart” />

This calls the GetChart action on the myProduct controller. The action creates a chart in memory, saves the chart as an image to a temp folder, and then streams the image of the chart to the client. By the way, the action returns a FileResult.

The main advantage of this third method is that it does not require the ASPX page to have any ASP server controls, and subsequently no code-behind is needed.

I looked into FileResult (derived from ActionResult) and found an interesting article on thuban.org :: Keith J. Farmer's blog here. Adopting this code, I quickly found the overload for the Chart.SaveImage that used a stream and plugged it all together (see below).

Using the code

To run the project, the following components must be installed:

• .NET Framework 3.5 SP1
• ASP.NET MVC Release Candidate 1 Refresh
• Microsoft Chart Controls for Microsoft .NET Framework 3.5

To use the mechanisms discussed in this article in your own project, you will need these additional steps:

• add the sections shown in the Code-Inside Blog International article to the web.config.
• add the chart or img markup (depending on the approach).
• add the code-behind (method 2) or the controller methods (method 3).
• include the FileResult class, if using method 3.

The examples shown are simplified, and do not draw data from a database.

Points of interest

The streaming of the image plugged nicely into the Chart API - they catered for this Use Case. On the downside, the data-binding on this release of the Microsoft Chart Controls for Microsoft .NET Framework 3.5 is quite primitive and is not LINQ or Entity friendly.

History

• 2009-Mar-09 - Typos and source-code update.
• 2009-Mar-05 - First submission.