ASP.Net Charts - Obtaining via jQuery on IE 7 causes the image not to load

Question

I am using the ASP.Net Charting Controls and ASP.Net MVC.

I am trying to have a chart displayed on a page, the user can change various data associated with this chart and then press a button which will perform a POST operation and then return a newly rendered chart. This is refreshed via jQuery which loads a partial view containing the chart.

The problem I am having is that in IE 7 I get the image could not be found icon. Bizarrely it works fine in Firefox!

The process of updating chart:

• Send new parameters in a POST
• Application changed parameters on the chart object
• Controller sends Chart Object to Partial View which renders it like a control
• jQuery then loads in this partial view. In IE 7 i get the image not found icon.

Here is the code used in the Partial View to render the Chart Object:

if (Model.Chart != null)
        {
            Model.Chart.Page = this.Page;
            System.Web.UI.DataVisualization.Charting.Chart Chart1 = Model.Chart;
            using (HtmlTextWriter writer = new HtmlTextWriter(this.Response.Output))
            {
                try
                {

                    Chart1.ImageType = System.Web.UI.DataVisualization.Charting.ChartImageType.Jpeg;
                    Chart1.RenderControl(writer);
                }
                catch (Exception ex)
                {
                    writer.WriteEncodedText(ex.Message);
                }
            }
        }

Cheers!

The jQuery which loads these charts is as follows:

function PostWidgetDataOverride(ChartID) {
    $.ajax({
        url: "/Home/GetChart",
        type: "POST",
        dataType: "HTML",
        data: { ChartID: ChartID, SeriesID: $('.SeriesID').val(), ParameterDefaults: $('.parameterDefault').serialize(), Time: getTimeStamp() },
        success: UpdateChart
    });
}

function UpdateChart(ChartContent) {
   $("#widgetConfig").dialog("close");
   var existingChart = CheckIfWidgetIsOnPage($(ChartContent).attr("id"))

   if (existingChart !== undefined) {
       existingChart.fadeOut("slow", function() { existingChart.replaceWith(ChartContent); }).fadeIn("slow");
   }
  else {
       $(ChartContent).appendTo($("#dashboardArea")).fadeIn("slow");
   }
}

Answer 1

I think the problem is how you get the image. From the code you posted it looks like you are getting the actual image data via a ajax download and then inserting the new image data into the DOM. This might work for Firefox, but not for IE (P.S never tried either). Anyway assuming that IE does not like this it would be better to point the image at an image handler via the source attribute of the image element. When you need to change the image just change the parameters in the url sent to handler, when this changes IE and Firefox will both make a request for the new image. For example:

The HTML

<img src="./chart.aspx?SeriesId=456&ChartId=123&Time=20091021155300" id="chart" />

The from jQuery when you need to update the chart:

function UpdateChart(chartId, seriesId, time){
  $("#chart").attr("src","./chart.aspx?SeriesId="+seriesId+"&ChartId="+chartId+"&Time="+time);
}

Answer 2

you can write a service to clean up images which are x days old or you can use #SEQ(maxFiles,minutes) to set the expiration but that is not really flexible with naming.

Answer 3

I got it working by changing ImageStorageMode to:

Chart1.ImageStorageMode = System.Web.UI.DataVisualization.Charting.ImageStorageMode.UseImageLocation

but now it hangs around in a folder. I don't want a folder clogging up with images...