Question

I’m trying to use an a chart generation library (ChartDirector) in ASP MVC3.

ChartDirector is generating a bar chart and an HTML image map based on a fairly large data structure.

I am looking for a way to:

1. Use the image directly without having to write it to a file
2. Use the generated HTML image map

I can generate an image and display it just fine:

public ActionResult barChart() // ImageController
{
    // Code to make chart from hard-coded data
    var imageBytes = chart.makeChart2(Chart.PNG);
    var imageMap = chart.getHTMLImageMap();
    FileContentResult byteStream = new FileContentResult(image, "image/png");
    return byteStream;
}

And then reference the controller directly inside one of the views with something like:

<img src="/Image/barChart"/>

The problem is that I can’t find a good way to get the necessary data from which to build the bar chart to the controller.

• I can’t have a controller add the image data to a model, because HTML
  requires the image is linked from some URI — a controller.
• None of the HTML helpers seem to allow me to send a model to a controller
• I’ve looked into making an HTML helper and an ImageResult type, but it doesn’t solve the problem of the image map and the only method I could find to build the URI, “BuildUrlFromExpression”, doesn’t seem to exist in MVC3.

One way I can accomplish all this is to put the model needed to generate the chart into TempData, then call the controller which will use TempData, and have the controller spit the HTML image map into TempData as well, which will be read by the view.
That seems remarkably ugly to me.

I can probably store the data by some sort of session ID, but that doesn’t seem much better.

I’ve looking at (among others): Can an ASP.NET MVC controller return an Image? but it doesn’t apply because that controller is reading some pre-generated image.

Answer 1

To me, the issue here is that you’re trying to combine too many things (which shows as the question actually has several different questions in it). The image request is a separate request from the HTML request. Look at it this way – what happens if I copy the image URL and send it to someone else because I want to show them the chart and not the rest of the page? Hot linking happens.

To deal with that, you can’t generate the image when someone hits the controller for the HTML page. You need to do it when that second request is made specifically for the chart. So your image request actually has to look very similar to the request for the webpage itself: it needs to contain enough information in the URL that the controller serving the image can get the necessary model data back from the database (or wherever it’s coming from) in order to generate the chart. So if the controller action that creates the webpage you want to display the chart on is this:

public ActionResult Details(int id)

Then in the same controller you need another action like this:

public ActionResult DetailsChart(int id)

The second one will go get the data, use the chart library you have to create the image, then return it. You’ll reference it like this:

<img src="/SomeController/DetailsChart/6" />

So that gets you the chart on the webpage, or wherever it was requested from. Now to display it without having to read the image off disk, you need to tell your chart control to not write to disk. If it’s got another MakeChart() that writes to a Stream then you’re good to go because you can write it to Response.OutputStream (or to a MemoryStream if you don’t want to write it to the HTTP response right away for some reason).

As for the ImageMap… that’s another thing again. ImageMaps are either HTML put on the page that tells the browser where to go depending on where the user clicks, or a server one where you need a third controller action to take a click on the image and handle it. You don’t send that at the same time as you’re sending the image, because that stuff’s not image data.