CODEWITHSUNDEEP
javascriptjsonhighcharts
Semaphore
Semaphore

Reputation: 63

Highcharts with multiple series from JSON

After reading and testing since few days (And already post here but with a wrong question) I really need you because I fail again and again...

My goal : having many series on same charts (and many charts in the future) My data source : a mysql and a json output :

"[{"name":"Station 1","data":"1360191600,398.625"},{"name":"Station 1","data":"1360192500,398.625"},{"name":"Station 1","data":"1360193400,398.25"},{"name":"Station 1","data":"1360194300,397.375"},{"name":"Station 1","data":"1360195200,397.5"},{"name":"Station 1","data":"1360196100,397.5"},{"name":"Station 1","data":"1360199700,396.75"},{"name":"Station 1","data":"1360200600,397"}...

These data are an example because in normal time I have many station and some with only the timestamp data.

My big fail at this moment is to send these information to the series:[] option.

I have try some loops like this : 

            data=JSON.parse(data) ;
            var series = [];
            series.data = [];
            $.each(data,function(i,ligne) {

                var string = JSON.stringify(ligne);
                var obj = $.parseJSON(string);
                //var index_serie = obj.name.slice(0,1) ;
                console.log(obj) ;
                points=(obj.data) ;
                series.name=obj.name ;
                series.data.push(points) ;
            }) ;
            options.series.push(series) ;
            console.log(options.series) ;

            var chart = new Highcharts.Chart(options);

The options of the chart are defined before the ajax call.

I have try with a other format of json like ["name":"station1","data":"[1321654,10],[5465... but I have difficulties to add the [] in my sql quesry and the GROUP_CONCAT have some limitation (2014 character)

So help me to create a nice loop in order to render multiple series with their name etc

Thanks for your help...

Upvotes: 1

Views: 6369

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Can't you change that "almost" JSON to "another" JSON? Maybe something like this:

[{
    "name":'station 1',
    "data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ]
}, {
    "name":'station 2',
    "data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ]
}]

If not, you have to add some parsing for your values, example:

data = JSON.parse(data);
var names = [];
$.each(data, function (i, ligne) {
    var ind = names.indexOf(ligne.name),
        splited = ligne.data.split(','),
        x = parseFloat(splited[0]),
        y = parseFloat(splited[1]);
    if (ind == -1) {
        /*series name spotted first time need to add new series */
        ind = names.push(ligne.name) - 1;
        options.series.push({
            data: [],
            name: ligne.name
        });
    } 
    if(!isNaN(x) && !isNaN(y)){
        options.series[ind].data.push([x,y]);    
    }
});

And working jsfiddle: http://jsfiddle.net/3bQne/40/

Upvotes: 2

Related Questions