CODEWITHSUNDEEP
javascripthighcharts
Koiski
Koiski

Reputation: 568

Dynamically populated highcharts data and database storing

I am trying to store highcharts data from a dynamically created chart in a database and get that data back into highcharts. To store the data in the database I create a string like this:

var chartPoints = "";

var series = chart.series;

for( var i = 0; i < series.length; i++ ) {
    var numberOfPoints = series[i].data.length;     //Get number of points

    for( var n = 0, length = numberOfPoints; n < length; n++ ) {
        chartPoints += '[' + series[i].points[n].x + ',' + series[i].points[n].y + '],';

    }
    chartPoints += '/,';
}

This creates a string like this "[1470009600000,0],[1471219200000,0],/,[1470009600000,-1],[1471219200000,-1],/," x values are dates. This is 2 series with an "/" between the series. The 2 series have 2 datapoints each. All the datapoints have an x and a y value. This is just an example with a low number of points and series in order to make it work.

The problem is that i don't know how i should push the values from that string back into highcharts. I know i can dynamically add series to highcharts like this:

chart.addSeries({                        
    name: "Test",
    data: [
            [x, y], 
            [x, y]  
        ]
});

But i don't know how to do that with a string like this. I tried to create an array with multiple dimensions out of the string in order to push values from that with some loops, but i couldn't get it right. What is the best way to do this?

Upvotes: 0

Views: 579

Answers (1)

James
James

Reputation: 577

Have you thought about storing the series data as a json string, then parsing it back into an object and passing it into the data param? You could do something like:

var sData = JSON.stringify(chart.series[0].options.data);

and store sData as a string. Then to load back into highcharts do:

var oData = JSON.parse(json_string_from_db);

chart.addSeries({                        
    name: "Test",
    data: oData
});

or 

chart.series[0].setData(oData);

I made a plunk: https://plnkr.co/edit/myGoss?p=preview which sets the data using setData() but could load the data when the series was created.

Upvotes: 2

Related Questions