Flot Ajax实时图表无法从CS页面获取数据

Question

我正在尝试使用来自cs页面的数据的Flot Ajax实时图表示例，但数据未通过。图表已创建，但数据点未显示。我错过了什么？

Default.aspx的

<%@ Page Title="Flot Examples: Real-time updates" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="js/flot/jquery.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="js/flot/jshashtable-2.1.js"></script>
<script type="text/javascript" src="js/flot/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.symbol.js"></script>

<!-- Javascript -->
<script type="text/javascript">
    var cpu = [], cpuCore = [], disk = [];
    var dataset;
    var totalPoints = 100;
    var updateInterval = 5000;
    var now = new Date().getTime();

    var options = {
        series: {
            lines: {
                lineWidth: 1.2
            },
            bars: {
                align: "center",
                fillColor: { colors: [{ opacity: 1 }, { opacity: 1}] },
                barWidth: 500,
                lineWidth: 1
            }
        },
        xaxis: {
            mode: "time",
            tickSize: [60, "second"],
            tickFormatter: function (v, axis) {
                var date = new Date(v);

                if (date.getSeconds() % 20 == 0) {
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                    return hours + ":" + minutes + ":" + seconds;
                } else {
                    return "";
                }
            },
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
        yaxes: [
            {
                min: 0,
                max: 100,
                tickSize: 5,
                tickFormatter: function (v, axis) {
                    if (v % 10 == 0) {
                        return v + "%";
                    } else {
                        return "";
                    }
                },
                axisLabel: "CPU loading",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 6
            }, {
                max: 5120,
                position: "right",
                axisLabel: "Disk",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 6
            }
        ],
        legend: {
            noColumns: 0,
            position:"nw"
        },
        grid: {      
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        }
    };

    function initData() {
        for (var i = 0; i < totalPoints; i++) {
            var temp = [now += updateInterval, 0];

            cpu.push(temp);
            cpuCore.push(temp);
            disk.push(temp);
        }
    }

    function GetData() {
        //set no cache
        $.ajaxSetup({ cache: false });

        $.ajax({
            url: 'Default.aspx',
            dataType: 'json',
            success: update,
            error: function () {
                setTimeout(GetData, updateInterval);
            }
        });
    }

    var temp;

    function update(_data) {
        //remove first item of array
        cpu.shift();
        cpuCore.shift();
        disk.shift();

        now += updateInterval


        //add the data retrieve from backend to array
        temp = [now, _data.cpu];
        cpu.push(temp);

        temp = [now, _data.core];
        cpuCore.push(temp);

        temp = [now, _data.disk];
        disk.push(temp);


        //update legend label so users can see the latest value in the legend
        dataset = [
            { label: "CPU:" + _data.cpu + "%", data: cpu, lines: { fill: true, lineWidth: 1.2 }, color: "#00FF00" },
            { label: "Disk:" + _data.disk + "KB", data: disk, color: "#0044FF", bars: { show: true }, yaxis: 2 },
            { label: "CPU Core:" + _data.core + "%", data: cpuCore, lines: { lineWidth: 1.2}, color: "#FF0000" }        
        ];

        //redraw the chart
        $.plot($("#flot-placeholder1"), dataset, options);

        //prepare for the update
        setTimeout(GetData, updateInterval);
    }


    $(document).ready(function () {
        initData();

        dataset = [        
            { label: "CPU", data: cpu, lines:{fill:true, lineWidth:1.2}, color: "#00FF00" },
            { label: "Disk:", data: disk, color: "#0044FF", bars: { show: true }, yaxis: 2 },
            { label: "CPU Core", data: cpuCore, lines: { lineWidth: 1.2}, color: "#FF0000" }
        ];

        $.plot($("#flot-placeholder1"), dataset, options);
        setTimeout(GetData, updateInterval);
    });


    </script>

    <!-- HTML -->
    <div style="width:900px;height:600px;text-align:center;margin:10px">        
        <div id="flot-placeholder1" style="width:100%;height:100%;margin:0 auto"></div>     
    </div>
</asp:Content>

Default.asp.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;

public partial class _Default : Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        Page.Controls.Clear();

        Random rnd = new Random();

        int CPUloading = rnd.Next(0, 100);

        int CPUcore = CPUloading - 30 < 0 ? 0 : rnd.Next(0, CPUloading - 30);

        int Disk = rnd.Next(56, 1024);

        Response.Write("{\"cpu\":" + CPUloading + ", \"core\":" + CPUcore + ", \"disk\":" + Disk + "}");

    }
}