Loading json data to highcharts with multiple series

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

});

Do you have a JSFiddle of this? jsfiddle.net

Cam Bruce
– Cam Bruce

2013-12-19 03:21:45 +00:00
Commented Dec 19, 2013 at 3:21 — Cam Bruce
– Cam Bruce, Commented Dec 19, 2013 at 3:21

SPandya · Accepted Answer · 2013-12-19 04:03:18Z

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.

Sebastian Bochan · Accepted Answer · 2013-12-19 10:30:56Z

0

Chart initialization should in insie getJSON body, because you try to initialize chart, earlier then data is get from URL
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.
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.

answered Dec 19, 2013 at 10:30

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

3 Comments

user3117622 Over a year ago

As I said, new to this so pretty much a novice so I am not clear on what you are saying on #2 and #3. The Series names, number of series varies, so hard coding as suggested by Saumil isn't viable. Is there any way that I can extract the first array element as the Series name and the remaining array elements as the Series?

user3117622 Over a year ago

Do I need to do an $Each on the JSon and then move the first element to the series name, reformat the remaining elements to another array and push it to the series?

Sebastian Bochan Over a year ago

So I advice to familiar with javascript at first

Collectives™ on Stack Overflow

Loading json data to highcharts with multiple series

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related