动态加载HighCharts系列

Question

I am trying to dynamically load in a number of series, depending on projects chosen by the user. I am using Laravel 5.2, PHP 5.6 and HighCharts. I have managed to load in one JSON file, which is generated when the user selects projects. But I would like it if the JavaScript could parse the different series from the JSON file and dynamically load this into the series. This is the code which I am using:

$(function () {
    // Set up the chart
    var processed_json = new Array();
    $.getJSON('/uploads/test.json', function(data) {
        for (i = 0; i < data.length; i++) {
            processed_json.push([data[i].key, data[i].value]);
        }
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 0,
                    beta: 0,
                    depth: 0,
                    viewDistance: 25
                }
            },
            title: {
                text: 'Grades'
            },
            subtitle: {
                text: 'Dataset'
            },
            plotOptions: {
                column: {
                    depth: 0
                }
            },
            series: [{
                name: 'Grades',
                data: processed_json
            }],

            credits: {
                enabled: false
            }
        });

        function showValues() {
            $('#alpha-value').html(chart.options.chart.options3d.alpha);
            $('#beta-value').html(chart.options.chart.options3d.beta);
            $('#depth-value').html(chart.options.chart.options3d.depth);
        }

        // Activate the sliders
        $('#sliders input').on('input change', function () {
            chart.options.chart.options3d[this.id] = this.value;
            showValues();
            chart.redraw(false);
        });

        showValues();
    });
    });

My JSON is formatted like:

[{"key":"Math","value":6},{"key":"Biology","value":"8"},{"key":"English","value":"7"},{"key":"Gym","value":"4"}]

So I would like to have more JSONs like so, in one file to be parsed in the Javascript and be loaded in into the series.

Thank you!

EDIT thanks for your reply. I have edited my code:

$(function () {

var processed_json = new Array();
        var options = {    
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 0,
                        beta: 0,
                        depth: 0,
                        viewDistance: 25
                    }
                },
                title: {
                    text: 'Grades'
                },
                subtitle: {
                    text: 'Dataset'
                },
                plotOptions: {
                    column: {
                        depth: 0
                    }
                },
                series: [{

                }],

                credits: {
                    enabled: false
                }
            };

        $.getJSON('/uploads/test.json', function(data) {
            for (i = 0; i < data.length; i++) {
                processed_json.push([data[i].key, data[i].value]);
            }
        });
            options.series[0].remove();
            options.series[0].setData = {
                name: 'Grades',
                data: processed_json
            }


        var chart = new Highcharts.Chart(options);
        chart.redraw(true);
        function showValues() {
            $('#alpha-value').html(chart.options.chart.options3d.alpha);
            $('#beta-value').html(chart.options.chart.options3d.beta);
            $('#depth-value').html(chart.options.chart.options3d.depth);
        }

        // Activate the sliders
        $('#sliders input').on('input change', function () {
            chart.options.chart.options3d[this.id] = this.value;
            showValues();
            chart.redraw(false);
        });

        showValues();

});

But nothing is displayed anymore and the following error is given

TypeError: options.series[0].remove is not a function

I have also tried

var chart = new Highcharts.Chart(options);
            chart.series[0].remove();
            chart.series[0].setData = {
                name: 'Grades',
                data: processed_json
            }
        chart.redraw(true);

But this gives:

TypeError: Cannot set property 'setData' of undefined

Answer 1

Then, define method with load data.. example:

function(chart) {
    $.each(chart.series, function(i, v){
        chart.series[i].remove(true);
    });
    chart.addSeries({your_data}, true);
}

check http://api.highcharts.com/highcharts/Chart.addSeries/Chart.addSeries In my webapp, i use 10 of 15 types of graphs highchart and all dynamically load and work fine :) Highcharts is awesome.