CODEWITHSUNDEEP
javascriptphpjqueryjsonhighcharts
Anna Jeanine
Anna Jeanine

Reputation: 4125

Dynamically load in series HighCharts

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

Upvotes: 3

Views: 1530

Answers (2)

Maxi Schvindt
Maxi Schvindt

Reputation: 1462

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.

Upvotes: 0

suguspnk
suguspnk

Reputation: 401



I think highcharts has a method chart.addSeries for adding a new series. If you want to replace the current series with a new series, you can try removing first the current series using chart.series[0].remove( ) then add the new series with chart.addSeries. The parameter for the chart.addSeries can be an object like your
{ name: 'Grades', data: processed_json }

Upvotes: 1

Related Questions