将JSON数据加载到具有多个序列的highcharts中

Question

Please help. Been banging my head against the wall on this for a week, trying every option I can find on line but no luck...

Am using HighCharts with a C#/Razor/WebMatrix site. Trying to create a Stacked column chart - have my Categories loading dynamically but can't get the series loaded.

I am new to Javascript and web programming in general so please be kind!

The JSON return data is:

["Clubs","1850","2600","5600","4950","8535","6050","8640",
 "Fesitvals","0","0","1000","750","0","1500","3250",
 "Private","650","2300","1600","2500","0","400","900",
 "Weddings","0","1400","3600","0","0","0","0",
 "Other Income","0","0","70","540","50","0","0"]

I am trying to load the series data prior to rendering the chart... The following is the entire script with formatting, etc.

script bombs out on the function to process and load the Json Data set (see Bold/Italic) . Chart looks great if hard code the series data, but since the site is database driven and the data changes regularly....

Here is the script:

$(function () {
    var ChartType = document.getElementById("CType").value;
    var SelectMember = document.getElementById("SMbmr").value;
    Highcharts.theme = {

        chart: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
            [0, 'rgb(0, 0, 0'],
            [1, 'rgb(0, 0, 0)']
         ]
            },
            borderWidth: 0,
            borderRadius: 15,
            plotBackgroundColor: null,
            plotShadow: false,
            plotBorderWidth: 0
        },
        title: {
            style: {
                color: '#FFF',
                font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        subtitle: {
            style: {
                color: '#DDD',
                font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        xAxis: {
            gridLineWidth: 0,
            lineColor: '#999',
            tickColor: '#999',
            labels: {
                style: {
                    color: '#999',
                    fontWeight: 'bold'
                }
            },
            title: {
                style: {
                    color: '#AAA',
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            }
        },
        yAxis: {
            alternateGridColor: null,
            minorTickInterval: null,
            gridLineColor: 'rgba(255, 255, 255, .1)',
            minorGridLineColor: 'rgba(255,255,255,0.07)',
            lineWidth: 0,
            tickWidth: 0,
            labels: {
                style: {
                    color: '#999',
                    fontWeight: 'bold'
                }
            },
            title: {
                style: {
                    color: '#AAA',
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            }
        },
        legend: {
            itemStyle: {
                color: '#CCC'
            },
            itemHoverStyle: {
                color: '#FFF'
            },
            itemHiddenStyle: {
                color: '#333'
            }
        },
        labels: {
            style: {
                color: '#CCC'
            }
        },
        tooltip: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
            [0, 'rgba(96, 96, 96, .8)'],
            [1, 'rgba(16, 16, 16, .8)']
         ]
            },
            borderWidth: 0,
            style: {
                color: '#FFF'
            }
        },


        plotOptions: {
            series: {
                shadow: true
            },
            line: {
                dataLabels: {
                    color: '#CCC'
                },
                marker: {
                    lineColor: '#333'
                }
            },
            spline: {
                marker: {
                    lineColor: '#333'
                }
            },
            scatter: {
                marker: {
                    lineColor: '#333'
                }
            },
            candlestick: {
                lineColor: 'white'
            }
        },

        toolbar: {
            itemStyle: {
                color: '#CCC'
            }
        },

        navigation: {
            buttonOptions: {
                symbolStroke: '#DDDDDD',
                hoverSymbolStroke: '#FFFFFF',
                theme: {
                    fill: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                  [0.4, '#606060'],
                  [0.6, '#333333']
               ]
                    },
                    stroke: '#000000'
                }
            }
        },

        // scroll charts
        rangeSelector: {
            buttonTheme: {
                fill: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
                },
                stroke: '#000000',
                style: {
                    color: '#CCC',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                        fill: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                     [0.4, '#BBB'],
                     [0.6, '#888']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'white'
                        }
                    },
                    select: {
                        fill: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                     [0.1, '#000'],
                     [0.3, '#333']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'yellow'
                        }
                    }
                }
            },
            inputStyle: {
                backgroundColor: '#333',
                color: 'silver'
            },
            labelStyle: {
                color: 'silver'
            }
        },

        navigator: {
            handles: {
                backgroundColor: '#666',
                borderColor: '#AAA'
            },
            outlineColor: '#CCC',
            maskFill: 'rgba(16, 16, 16, 0.5)',
            series: {
                color: '#7798BF',
                lineColor: '#A6C7ED'
            }
        },

        scrollbar: {
            barBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            barBorderColor: '#CCC',
            buttonArrowColor: '#CCC',
            buttonBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            buttonBorderColor: '#CCC',
            rifleColor: '#FFF',
            trackBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
            [0, '#000'],
            [1, '#333']
         ]
            },
            trackBorderColor: '#666'
        },

        // special colors for some of the demo examples
        legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
        legendBackgroundColorSolid: 'rgb(70, 70, 70)',
        dataLabelsColor: '#444',
        textColor: '#E0E0E0',
        maskColor: 'rgba(255,255,255,0.3)'
    };

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    var CatName = new Array();
    var DataSeries = new Array();
    var currentDate = new Date();
    var currentYear = currentDate.getFullYear();
    for (var i = 2007; i <= currentYear; i++) {
        CatName.push(i.toString());
    }
    ***$.getJSON('/Admin/Accounting/ChartJSon/' + ChartType + '/0', function (DataSet) {
          options.series = DataSet;
    });***
    $('#container').highcharts(
        {

            chart:
            {
                renderTo: 'container',
                defaultSeriesType: 'column',
                plotBorderWidth: 1,
                plotBorderColor: '#3F4044'
            },
            credits: { enabled: false },
            title:
            {
                text: 'Sales by Type and Year'
            },

            xAxis:
            {
                categories: CatName
            },

            yAxis:
            {
                allowDecimals: false,
                min: 0,
                title:
                {
                    text: 'Sales'
                }
            },

            tooltip:
            {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }
            },

            plotOptions:
            {
                column:
                {
                    stacking: 'normal'
                }
            },

            series: []
        });

});

Answer 1

Well I see some problems here. First try to replace the highchart code with the below mentioned code. As you need to specify data for each series in the series option. and provide with the unique name.

 $('#container').highcharts(
                {

                    chart:
                    {
                        renderTo: 'container',
                        defaultSeriesType: 'column',
                        plotBorderWidth: 1,
                        plotBorderColor: '#3F4044'
                    },
                    credits: { enabled: false },
                    title:
                    {
                        text: 'Sales by Type and Year'
                    },

                    xAxis:
                    {
                        categories: CatName
                    },

                    yAxis:
                    {
                        allowDecimals: false,
                        min: 0,
                        title:
                        {
                            text: 'Sales'
                        }
                    },

                    tooltip:
                    {
                        formatter: function () {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + this.y + '<br/>' +
                                'Total: ' + this.point.stackTotal;
                        }
                    },

                    plotOptions:
                    {
                        column:
                        {
                            stacking: 'normal'
                        }
                    },

                   series: [{
                        name: 'Clubs',
                        data: []
                    }, {
                        name: 'Festivals',
                        data: []
                    }, {
                        name: 'Private',
                        data: [],
                    }, {
                        name: 'Weddings',
                        data: [],
                    }, {
                        name: 'OtherIncome',
                        data: [],
                    }]
                });

        });

And your JSON should be an array consisting only numbers.

Answer 2

1. Chart initialization should in insie getJSON body, because you try to initialize chart, earlier then data is get from URL
2. In JSON you need to use numbers, not strings. If it is not possbile, you need to parse values in javascript by parseFloat on each data value.
3. Your series data object, should contian only numbers, not names like "Fesitvals". If you wuld like to have a few series, and each of them has own name, you need to parse your json and praaper correct array structure.