Flot Chart Conversion C# Javascript/AJAX - Bar Chart

Question

I am trying to convert a C# list object to the correct format for a Flot Bar chart. For some reason I just can't seem to get it done correctly. I have tried several different methods. The JSON I am returning is valid JSON and the list is valid but for some reason the Flot chart wants the data in a different format. Any help would be appreciated. Thank you!

Here is the converted C# List to JSON Array

[{"color":"red","data":["Agriculture",0,2]},{"color":"red","data":["Healthcare",0,1]},{"color":"red","data":["Manufacturing",0,0]},{"color":"red","data":["Retail",0,0]},{"color":"red","data":["Information Technology",0,0]}]

I use this method to do so:

    $.ajax({
            type: "POST",
            url: "Summary.asmx/getBarChartSeriesData",
            data: JSON.stringify({ userid: userid }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {

                barSummaryData = response.d;
                var jsonArray = JSON.parse(response.d);
                //this format seems to work
                //var data = [{ data: [[0, 1]], color: "red" }, { data: [[1, 2]], color: "yellow" }, { data: [[2, 3]], color: "green" }];


                var plot = 
                $.plot($('#barSummaryPlaceholder'), jsonArray, {
                    series: {
                        bars: {
                            show: true,
                            barWidth: 0.3,
                            align: "center"
                        }
                    },
                    xaxis: { 
                        ticks: ticks
                    },
                    grid: { hoverable: true, clickable: true }
                });

            },
            failure: function (msg) {
                $('#barSummaryPlaceholder').text(msg);
            }
        });

Here is the C# Method in the ASMX:

    public string getSummaryBarChartSeriesData(int userid)
    {

        List<Series> SeriesData = new List<Series>();

        DataTable dt = new DataTable();
        dt.Clear();

        dt = chartcode.RetrieveSummaryBarChartData(userid);
        int countOfRows = 0;

        foreach (DataRow row in dt.Rows)
        {
            List<object> objData = new List<object>();
            objData.Add(row["Name"].ToString());
            objData.Add(countOfRows);
            objData.Add(Convert.ToInt32(row["CountOfStudents"]));

            SeriesData.Add(
             new CareerClusterSeries
             {
                 data = objData,
                 color = "red"
             });

        }

        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(SeriesData);
        return json;
    }

For some reason the C# json string is in the valid format for JSON itself but NOT the correct format for Flot charts which is the chart system I am trying to use.

Answer 1

First, from the documentation Flot Reference: Data Format, the data field should be an array of arrays of numbers, e.g.:

{
    label: "y = 3",
    data: [[0, 3], [10, 3]]
}

In contrast, you have an flat array of numbers with a string mixed in: {"data":["Agriculture",0,2], "color":"red",}. What is the purpose of the string -- is it the series label?

Next, did you forget to increment countOfRows? It's always zero in your code.

Assuming you wanted to increment the count and set row["Name"] to be the series label, the following should produce JSON that complies with the API:

public class Series
{
    public string color { get; set; }
    public List<IList<double>> data { get; set; }
    public string label { get; set; }
}

And then:

    public string getSummaryBarChartSeriesData(int userid)
    {
        var SeriesData = new List<Series>();

        DataTable dt = chartcode.RetrieveSummaryBarChartData(userid);

        int countOfRows = 0;
        foreach (DataRow row in dt.Rows)
        {
            var rawData = new List<IList<double>>();
            rawData.Add(new double[] { countOfRows++, Convert.ToInt32(row["CountOfStudents"]) });
            //objData.Add(row["Name"].ToString());

            SeriesData.Add(
             new CareerClusterSeries
             {
                 data = rawData,
                 color = "red",
                 label = row["Name"].ToString(),  // Guessing you wanted this.
             });
        }

        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(SeriesData);
        return json;
    }