返回Json的asp.net webform与flot.js图表​​不起作用

时间:2012-11-19 14:17:22

标签: asp.net json charts webforms flot

我使用ASP.NET webforms进行flot chart我使用[Webmethod]连接到test.aspx.cs文件中的数据库,我可以返回json。

我将返回值存储在textarea和$ .plot(占位符,[以及此处],选项中)它不会在占位符中打印图形,但是当我这样做时:

var data = past

这里的textarea的值并运行applicationn它会打印给我的值。

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<string> GetLocation(string location)
        {
            List<string> result = new List<string>();

            StringBuilder strQuery = new StringBuilder();
            strQuery.Append("SELECT Location.Nome_Location, DATEPART(day, Statistiche.Data_Statistica) AS SDay, COUNT(Statistiche.ID_Tabella) AS Stats");
            strQuery.Append("  FROM Statistiche INNER JOIN Tabelle ON Statistiche.ID_Tabella = Tabelle.ID_Tabella INNER JOIN");
            strQuery.Append(" Location ON Statistiche.ID_Colonna_Statistica = Location.ID_Location");
            strQuery.Append(" WHERE (Statistiche.ID_Tabella = 2) AND (Statistiche.ID_Box = 60) AND (Location.Nome_Location = 'Albilò')");
            strQuery.Append("GROUP BY Location.Nome_Location, DATEPART(day, Statistiche.Data_Statistica)");
            string query = strQuery.ToString();

            SqlConnection con = new SqlConnection("");
            SqlCommand cmd = new SqlCommand(query, con);

            con.Open();
            int counter = 1;
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                if (counter == 1)
                {
                    result.Add("[{'label': 'Europe (EU27)','data':[[" + dr["SDay"].ToString() + "," + dr["Stats"].ToString() + "]");
                }
                else
                result.Add("[" + dr["SDay"].ToString() + "," + dr["Stats"].ToString() + "]");
                if (counter==31)
                {
                    result.Add("[" + dr["SDay"].ToString() + "," + dr["Stats"].ToString() + "]]}]");
                }
                counter++;
            }
            return result;
        }

$.ajax({
            type: "POST",
            async: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "test.aspx/GetLocation",
            data: "{'location':'Albilò'}",
            success: function drawChart(msg) {
                var options = { lines: { show: true }, points: { show: true }, xaxis: { tickDecimals: 0, tickSize: 1} };


                var ddata = [];


                var data = msg.d;


                for (var i = 0; i < 32; i++) {
                    ddata.push(data[i]);
                }


                var placeholder = $("#placeholder");
                $("#txtvalue").val(ddata);

                var datad = $("#txtvalue").text();

                $.plot(placeholder, ddata, options);

            },
            error: function () {
                alert("call is called111");
            }
        });

1 个答案:

答案 0 :(得分:1)

首先,您为什么要自己创建JSON?您已经指定在属性中返回JSON。 重构方法返回简单的POCO对象数组,如

[Serializable]
public class pocoObject
{
  public string Label;
  ..
}

然后你的方法应该只返回对象列表并设置属性:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<pocoObject> GetLocation(string location)
{
  ...
  return result; // result is list of pocoObjects
}

Flot.js对你设置为源的数据相当敏感,所以在看完firebug中的数据后,它应该是正确的json格式数据。因此,请访问wiki并将您的数据与工作samples进行比较。

这是如何初始化你的情节名称:

$(function () {
    var d1 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d1.push([i, Math.sin(i)]);

    var d2 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d2.push([i, Math.cos(i)]);

    var d3 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.1)
        d3.push([i, Math.tan(i)]);

    $.plot($("#placeholder"), [
        { label: "sin(x)",  data: d1},
        { label: "cos(x)",  data: d2},
        { label: "tan(x)",  data: d3}
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        xaxis: {
            ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
        },
        yaxis: {
            ticks: 10,
            min: -2,
            max: 2
        },
        grid: {
            backgroundColor: { colors: ["#fff", "#eee"] }
        }
    });
});