Asp.net webform with flot.js chart on return Json does not work

Question

I am using ASP.NET webforms for flot charts I connected to database in test.aspx.cs file using [Webmethod] where I can return json.

I stored the return value both in textarea and $.plot(placeholder, [and also here], options) It does not print the graph in placeholder however when I do:

var data = past

the value of textarea here and run applicationn it prints to me the value.

[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");
            }
        });

Answer 1

First of all, why do you create JSON yourself? You've already specified to return JSON in you attributes. Refactore method to return simple array of POCO objects like

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

Then your method should just return list of object and have attributes set up:

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

Flot.js is rather sensitive to data you set as source, so after this take a look at data in firebug, it should be correct json formatted data. So please visit wiki and also compare your data to working samples.

This how you can initiliaze legend names of you plot:

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