Highcharts add series dynamically

Question

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);

    };

sample data of the 3dim array and the js object: http://jsfiddle.net/eAu32/ — spyfx, Jun 21 '13 at 10:33

Paweł Fus · Answer 1 · 2013-06-21T12:20:53.710

5

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();
    });

edited Jun 21 '13 at 12:20

answered Jun 21 '13 at 10:43

Paweł Fus

44,795
3
61
77

its looking weird from here: http://img823.imageshack.us/img823/2685/7y5l.jpg I know - that I am useing more data than you, but idk why my chart draws points an the line – spyfx Jun 21 '13 at 11:00
and there is no timeline/zoom value as well – spyfx Jun 21 '13 at 11:10
Which timeline/zoom? Why do you think this is rendered in a wrong way? – Paweł Fus Jun 21 '13 at 11:59
Maybe you want Highstock chart - in that case ... see edit by Sebastian :) – Paweł Fus Jun 21 '13 at 12:00
The problem is: I want to add the series dynamically (see my edit at my post). - That means the number of series depends on the returned data of the webservice. I want to add my data with a for/foreach. – spyfx Jun 21 '13 at 12:08
And what is the problem with adding that series..? Your screenshot add series. Se updated answer. – Paweł Fus Jun 21 '13 at 12:20
New info - Series cant be empty? see http://jsfiddle.net/DGdaf/8/ line 71-75. So i have to set series? and cant load them totally dynamic (line 93-100)? – spyfx Jun 21 '13 at 12:24
thanks for your support so far - but when I am using the callback function, I am just getting an empty chart. (no data is displayed). http://jsfiddle.net/DGdaf/9/ – spyfx Jun 21 '13 at 13:43

Highcharts add series dynamically

1 Answers1

Linked