How to dynamically add grouped data

[zhivko.zhelezov]

Hi all,

I am experiencing the following problem in the angular application I am developing. Currently I want to dynamically add series toline charts. The data for the series comes as key value pairs, where the key is a DateTime and the value is Integer. The common between all series that are going to be added is that the categoryAxis is Date in every case. I have two questions:

     What is the best way to add dynamic series to the chart. I tried an approach by one of you colleges :

      

//add series
chartOptions.series.push({});

//add data to particular series
chartOptions.series[3].data = [//....]

//recreate the chart
chart.redraw();

      but is not working for me. Then I tried with creating new dataSource every time when a series is added and then

chartDataSource = new kendo.data.DataSource({
     data: data[0].goodPointSeriesData
});
// where goodPointSeries is list of key value pairs (Date, Value)
chart.setDataSource(chartDataSource);
chart.refresh();

 but this timeouts almost every time. The amount of data in goodPointSeries is around 600 points. How can I proceed with this problem?

 

   My second question is how to adjust the categoryAxis, when there are 600 category values. For example I have I time interval of 1 day and every point in my dateset is associated with particular moment. If I manage to render the line chart, i see that the category labels are overlapped (because there are too many of them) and they look like a black line. I tried with baseUnit but in my case if I set it to seconds I get the same result, and if I set it to something bigger than seconds then not all of the datapoints are shown?

 

Regards,

Zhivko

[zhivko.zhelezov]

I was able to fix the slow redrawing of the chart with setting the baseUnit to minutes and then dynamically setting the step of the labels. Now I am wondering how to add new series with grouped data dynamically to the chart.

[Iliana Nikolova]

Hi Zhivko,

When Kendo UI Chart is bound to a dataSource it will automatically refresh when this dataSource is changed. For the current  I would suggest using the dataSource add method. For your I prepared a dojo example which demonstrates a possible implementation.

Regards,
Iliana Nikolova
Telerik