Как обновить графики asp.net в MVC с помощью jQuery - PullRequest
Новая
       14

Как обновить графики asp.net в MVC с помощью jQuery

1 голос
/ 08 августа 2009

Я скачал код и следую за примером Парень из Квинсленда

Как я могу обновить график при нажатии кнопки Обновить?

Следующий код возвращает PNG в двоичном формате. 

<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" />

Контроллер 

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());
}

Метод контроллера работает нормально, только когда я нажимаю кнопку обновления, он не возвращает то, что мне нужно.

1 Ответ

2 голосов
/ 19 февраля 2010

Это был вызов, но вот как я это сделал. Ключом для меня было добавление метки даты и времени как части вызова AJAX в refreshChart (). Это изменение победило любой браузер или кэширование прокси, которое мешало обновлению диаграммы.

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;
}

Другие инструменты, используемые в решении (но не имеющие отношения к ответу на вопрос):

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...