Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts add series dynamically

I want to add some series (I get the series data from a webservice as a 3dim array (and returning it as json) - I dont know the number of series I will get, so I have to load the series data dynamically).

In javascript I am building an object: (like this highstock example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/)

seriesOptions[i] = {
    name: namearray[i],
    data: dataarray
};

e.g. result: [Object { name="Series", data=[[1041375600000, 29,9]]}]

I was trying to add the series like this:

$.each(seriesOptions, function (itemNo, item) {
    chart.addSeries({                        
        name: item.name,
        data: item.data
    }, false);
});
chart.redraw();

But the chart draws the series kinda weird and doesnt convert to timestamp to date.
Are there any problems with my chart data from the webservice?

Here is my code: http://jsfiddle.net/DGdaf/2/

Thanks for any help so far.

EDIT
It seems like the chart ignoeres all the default values of timeline/zoom value. I have no idea why it doesnt display these components.
The problem could be, that I am drawing the chart after the initialization?

chart = new Highcharts.Chart(options);

But I have to do it cause of the dynamic series loading.

EDIT2
I am not sure if I am loading too much data or something. I cant create my series dynamically.

for(i=0; i<seriesOptions.length; i++){
        chart.addSeries({                        
            name: seriesOptions[i].name,
            data: seriesOptions[i].data
        }, true);

    };
like image 496
spyfx Avatar asked Jun 21 '13 10:06

spyfx


1 Answers

Set for your yAxis:

yAxis: {
    type: 'datetime'
}

See fiddle

EDIT: Timeline / zoom http://jsfiddle.net/DGdaf/5/

Edit: Use callback to add series, when chart is ready. However, why don't you add these series when chart is created?

    chart = new Highcharts.Chart(options, function(ch) {

        $.each(seriesOptions, function (itemNo, item) {
            ch.addSeries({                        
                name: item.name,
                data: item.data
            }, false);

        });
        chart.redraw();
    });
like image 61
Paweł Fus Avatar answered Oct 22 '22 10:10

Paweł Fus