How to refresh asp.net charts in MVC using jQuery

Question

I downloaded the code and am following the sample Guy from Queensland

How can I refresh the chart when I click Refresh?

The following code returns the PNG in binary.

<input type="submit" value="Refresh" id="refreshIssueHistory" />
<div id="theImageIssueHistory">
<% Html.RenderPartial("~/Views/Issue/Charts/IssueHistoryImg.ascx"); %></div>

<script type="text/javascript">
$(document).ready(function() {

    $("#refreshIssueHistory").click(function() {
        RefreshImage();
    });
});

function RefreshImage() {
    $.ajax({
        type: "POST",
        url: "/Issue/" + "GetIssuesHistoryChart",
        dataType: "html",
        data: {
            projectId: 2// changing ID here to see if the image changes
        },
        success: function(v) {
            RefreshHistoryImage(v);

        },
        error: function(v, x, w) {
            //Error
        }
    });
}

function RefreshHistoryImage(v) {
    $('div#theImageIssueHistory').load('/Issue/GetIssuesHistoryChart', { projectId: 2 },
    function(html) {
        $('div#theImageIssueHistory')[0].value = html;
    });
}    
</script>

IssueHistoryImg.ascx

<img src="/Issue/GetIssuesHistoryChart" alt="My Issues" />

Controller

public FileResult GetIssuesHistoryChart(int? projectId)
{
 ...
 System.IO.MemoryStream imageStream = new System.IO.MemoryStream();
 Chart1.SaveImage(imageStream, ChartImageFormat.Png);
 return new FileResult("Yo.png", "image/png", imageStream.ToArray());
}

The controller method works fine, only when I click the refresh button that it does not return what I want it to.

Answer 1

It was a challenge, but here is how I did it. The key for me was adding the datetime stamp as part of the AJAX call in refreshChart(). That changed defeated any browser or proxy caching that was preventing the chart from updating.

Index.aspx

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        refreshChart("#chartAlerts", "/Chart/AlertsChart");
    })
    .everyTime(60000, function() {
        refreshChart("#chartAlerts", "/Chart/AlertsChart");
    });

    function refreshChart(id, url) {
        $(id).fadeTo(1000, 0.15).attr("src", url + "?t=" + new Date().getTime()).fadeTo(1000, 1);
    }
</script>


<div class="DashboardBlock" id="block2">
    <div class="DashboardBlockHeader"><h2>Alerts Summary</h2></div>
    <div class="DashboardBlockContent">
        <img id="chartAlerts" alt="" src="" width="460" height="225" />
    </div>
</div>

Site.css

.DashboardBlock 
{
    border:#000000 1px solid;
    margin-bottom:3px;
}

.DashboardBlockHeader 
{
    padding: 3px 10px 3px 10px;
    color: #ffffff;
    background-image:url(../../Content/images/blockheader_bkg.gif);
    background-repeat: no-repeat;
    cursor:move;
    display:block;
}

.DashboardBlockHeader h2 
{
    font-size:1.09em;
    margin:0px 0 0px 0;
    padding:0;
}

.DashboardBlockContent 
{
    padding:5px 3px 2px 3px;
}

ChartController.cs

public ActionResult AlertsChart()
{
    var chart = new Chart()
    {
        Width = 460,
        Height = 225,
        ImageType = ChartImageType.Png,
        Palette = ChartColorPalette.BrightPastel,
        BackColor = Color.WhiteSmoke,
        RenderType = RenderType.BinaryStreaming,
        BackGradientStyle = GradientStyle.TopBottom,
        BackSecondaryColor = Color.White,
        AntiAliasing = AntiAliasingStyles.All,
        TextAntiAliasingQuality = TextAntiAliasingQuality.High
    };
    chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

    var title = chart.Titles.Add("Main");
    title.Text = "Alerts";
    title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
    title.ShadowOffset = 2;
    title.ForeColor = Color.FromArgb(26, 59, 105);
    title.Font = new Font("Segoe UI", 10f, FontStyle.Bold);

    var area = chart.ChartAreas.Add("ChartArea1");
    area.BorderColor = Color.FromArgb(64, 64, 64, 64);
    area.BackSecondaryColor = Color.White;
    area.BackColor = Color.WhiteSmoke;
    area.ShadowColor = Color.Transparent;
    area.Area3DStyle.PointDepth = 100;
    area.Area3DStyle.PointGapDepth = 100;
    area.Area3DStyle.Rotation = 10;
    area.Area3DStyle.Enable3D = true;
    area.Area3DStyle.Inclination = 40;
    area.Area3DStyle.IsRightAngleAxes = false;
    area.Area3DStyle.WallWidth = 0;
    area.Area3DStyle.IsClustered = false;
    area.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
    area.AxisY.LabelStyle.Font = new Font("Trebuchet MS", 8.25f, FontStyle.Bold);
    area.AxisY.LabelStyle.Format = "$#,##0";
    area.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
    area.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
    area.AxisX.LabelStyle.Font = new Font("Trebuchet MS", 8.25f, FontStyle.Bold);
    area.AxisX.LabelStyle.Format = "MM/dd";
    area.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);

    var legend = chart.Legends.Add("Default");
    legend.Enabled = true;
    legend.IsTextAutoFit = true;
    legend.BackColor = Color.Transparent;
    legend.Font = new Font("Segoe Condensed", 8f, FontStyle.Regular);
    legend.Docking = Docking.Right;

    // Load from the database
    var history = GetAlertHistory();
    if (history.RowCount > 0)
    {
        chart.DataBindTable(history.DefaultView, AlertHistoryViewSchema.AlertName.FieldName);
        chart.Series[0].ChartType = SeriesChartType.Pie;
        chart.Series[0].IsValueShownAsLabel = true;
        chart.Series[0]["PieLabelStyle"] = "Outside";
        chart.Series[0].Font = new Font("Segoe Condensed", 8.25f, FontStyle.Regular);

        history = GetAlertHistorySummary();
        DateTime lastAlertDate = Convert.ToDateTime(history.GetColumn("LastAlertDate"));
        title = chart.Titles.Add(String.Format("Total Alerts: {0:#,##0}  Last Alert Date: {1:MM/dd/yyyy h:mm tt}", history.GetColumn("AlertCount"), lastAlertDate));
        title.Font = new Font("Segoe Condensed", 10f, FontStyle.Regular);
        title.ForeColor = lastAlertDate - DateTime.Now > TimeSpan.FromMinutes(2) ? Color.Red : Color.Black;
    }
    else
    {
        chart.Titles.Add("There are no alerts.");
    }

    var ms = new MemoryStream();
    chart.SaveImage(ms, ChartImageFormat.Png);

    HttpContext.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
    return File(ms.GetBuffer(), @"image/png");
}

private AlertHistoryView GetAlertHistory()
{
    var obj = new AlertHistoryView();
    obj.DatabaseInstanceName = "Alerts";

    string serialData = HttpContext.Cache["_alertHistory"] as string;

    if (string.IsNullOrEmpty(serialData))
    {
        try
        {
            obj.Query.AddResultColumn(AlertHistoryViewSchema.AlertName);
            obj.Aggregate.AlertID.Function = AggregateParameter.Func.Count;
            obj.Aggregate.AlertID.Alias = "AlertCount";
            obj.Where.Date.Value = DateTime.Now.ToShortDateString();
            obj.Where.Date.Operator = WhereParameter.Operand.GreaterThanOrEqual;
            obj.Query.AddGroupBy("AlertName");
            obj.Query.AddOrderBy("AlertName", WhereParameter.Dir.ASC);
            obj.Query.Load();

            HttpContext.Cache.Insert("_alertHistory", obj.Serialize(), null, DateTime.Now.AddMinutes(15), Cache.NoSlidingExpiration);
        }
        catch { }
    }
    else
    {
        obj.Deserialize(serialData);
    }

    return obj;
}

Other tools used in the solution (but irrelevant to answer the question):

• JQuery timer plugin (http://plugins.jquery.com/project/timer)
• EasyObjects.NET, my O/RM to retrieve data from the database (http://www.easyobjects.net)
• ASP.NET chart controls (obviously ;)