asp.net - ハイチャート コントロールの複数の折れ線グラフ - json、ジェネリック リスト、asp.net

Question

複数の折れ線グラフをハイチャート コントロールに読み込もうとしています。サーバー (asp.net) から JSON をフェッチし、Newtonsoft の JSONConvert を使用して汎用リストを JSON に変換しています。

私のx軸ラベルはカスタム（1月、2月、3月...または「午前9時、月曜日」、「午前10時、火曜日」など）なので、xを渡そうとしています-クライアント側への軸「カテゴリ」も。

髪を抜いて、2日間さまざまなことを試しています. 私は JSON の専門家ではありません。Highcharts を使用するのはこれが初めてです。おそらく初心者のコードであることをご容赦ください :)。SOに関する同様の投稿をたくさん読んだことがありますが、これと同じニーズの組み合わせではないように見えるか、何かが欠けている可能性があります。ヘルプ！

//This is a webapi call that returns the data for multiple line charts
public dynamic GetOverViewLineChart()
{
    List<ChartClasses.ChartPoint> chartPoints = GetChart();

    //this should be in a function that looks at time range and selects the appropriate 
    // x-axis values
    List<string> categories = (
                                from chartpoint in chartPoints
                                select new string(chartpoint.category.ToCharArray())
                               ).ToList();

    List<ChartClasses.ChartSeries> seriesToPlot = new List<ChartClasses.ChartSeries>();
    seriesToPlot.Add(new ChartClasses.ChartSeries(JsonConvert.SerializeObject(chartPoints), "firstChart"));
    seriesToPlot.Add(new ChartClasses.ChartSeries(JsonConvert.SerializeObject(chartPoints), "secondChart"));

    string returnJson = JsonConvert.SerializeObject(seriesToPlot);
    string returnCategories = JsonConvert.SerializeObject(StuffCategories(categories));

    return new {
                    categories = JsonConvert.SerializeObject(categories), 
                    seriesData = JsonConvert.SerializeObject(seriesToPlot) 
    };
}

private List<ChartClasses.ChartPoint> GetChart()
{
    List<ChartClasses.ChartPoint> chartPoints = new List<ChartClasses.ChartPoint>() { 
            new ChartClasses.ChartPoint("January","Jan", 1),
            new ChartClasses.ChartPoint("February","Feb", 2)
        };
    return chartPoints;
}

  public class ChartClasses
{
    public class ChartPoint
    {
        //property names get serialized and match what the chart control expects
        public string name; //in balloon help
        public int y; //y value
        public string category; //goes on X axis

        public ChartPoint(string tooltip, string xval, int yval)
        {
            name = tooltip;
            y = yval;
            category = xval;
        }
    }

    public class ChartSeries
    {
        public string name;

        private string _data;

        public string data { 
            get {return _data;}
            set
            {
                //string originalValue = value;
                _data = value.Replace(@"\",string.Empty).Replace(@"""","'");
            }
        }

        public ChartSeries(string dataVal, string nameVal)
        {
            data = dataVal;
            name = nameVal;
        }
    }
}

クライアント側のコードは次のとおりです。

<script language="javascript" type="text/javascript">
    var seriesOptions = [],
        seriesCounter = 0;

    $.get('/api/WebAnalytics/GetOverViewLineChart', function (data) {
        $.each(JSON.parse(data.seriesData), function (i, chartSeries) {

            var thisData = {};
            thisData.data = chartSeries.data;

            seriesOptions[i] = {
                name: i,
                data: thisData
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == (JSON.parse(data.seriesData)).length) {
                createChart(data);
            }

        });
    });

    function createChart(data) {

        $('#chartContainer').highcharts({
            chart: {
                type: 'line'
            },

            xAxis: {
                categories: data.categories
            },

            series: seriesOptions
        });

    }
</script>

これを実行すると、データのないグラフが表示されます。ヘルプ！

ありがとう。

編集：

Pawel のアドバイスのおかげで、JSON をどのように解析しているかをもう一度見て、それを機能させました!! 作業コードは次のとおりです。

    <script language="javascript" type="text/javascript">
    var seriesOptions = [],
        seriesCounter = 0;

    $.get('/api/WebAnalytics/GetOverViewLineChart', function (categoriesAndSeriesData) {

        $.each(JSON.parse(categoriesAndSeriesData.seriesData), function (i, chartSeries) {

            var chartPoints = JSON.parse(chartSeries.data);

            //make series data array from array of chartPoints
            var dataPoints = [];
            $.each(chartPoints, function (idx, chartPoint) {
                dataPoints.push(chartPoint.y);
            });


            seriesOptions[i] = {
                name: chartSeries.name,
                data: dataPoints
            };

            seriesCounter++;

            if (seriesCounter == (JSON.parse(categoriesAndSeriesData.seriesData)).length) {
                createChart(categoriesAndSeriesData);
            }

        });
    });

    function createChart(categoriesAndSeriesData) {

        $('#chartContainer').highcharts({
            chart: {
                type: 'line'
            },

            xAxis: {
                categories: data.categories
            },

            series: seriesOptions
        });

    }


</script>