DataViz Stock Chart issues with KendoUI Mobile

[ahmed]

Hi,

i am using dataviz stock chart(candlestick) in my kendo mobile app and bind this (like: dataSource: {data: chartviewmodel.chartpoints}) on observable collection of data in json format like this (var chartviewmodel = kendo.observable({
            chartpoints:[{
        "Date": "2011/03/31",
        "Open": 44,
        "High": 44.56,
        "Low": 43.94,
        "Close": 44.5,
        "Volume": 2340500
    }
  ]
});)

but there is two problems with that:
1- if i open this view on my iphone and left it for a while it crashes and browser closes
2- when i add a new entry in the observable collection whole chart refreshed and redraw every point again but not only the new added point.

so can u help me to solve these two issues with stock chart ?

[Alexander Valchev]

Hello Ahmed,

Passing an observable array as data for the DataSource is not supported. If you would like to work with MVVM please consider using source binding.

<div data-role="view" data-model="chartviewmodel">
    <div data-role="stockchart" data-bind="source: chartpoints"></div>
</div>

Have in mind that you will have to set the rest of chart's settings using data attribute initialization.

Alternatively you may build the chart via JavaScript at the init event of the corresponding View and transform the observable array into standard one. For this task you can use the toJSON method. Here is an example:

function onInit() {
    $("#chart").kendoStockChart({
        dataSource: {
            data: chartviewmodel.chartpoints.toJSON()
        },
        //rest of the configuration
    });
}

Please have in mind that if you choose to work with the second approach the chart will not be bound to the View-Model. If you want to modify the chart's data you will have to work with the DataSource API.

I hope this will help. In case you still experience problems, please send me a small but runnable example that demonstrates your current implementation and the issues. In this way I would be able to examine your case in details and assist you further.

Best regards,
Alexander Valchev
the Telerik team

[ahmed]

Hi Alexander,

Thanks for your reply but i need an example that demonstrates stockChart with live feed (i mean add data items to collection that chart binded to and chart draw this added point) and how can i deal with.

Thanks.

[Alexander Valchev]

Hi Ahmed,

I cannot understand what is the problem here. If the chart is bound to an observable array then you can add points through the push method. As soon as you push an item, the chart will refresh to display your new point.
If the chart is bound to a DataSource then you can use its add or insert methods to add records. Again the chart will automatically refresh to display the changes.

Could you please specify what problems you experienced? Please let me know if I missed something.

Kind regards,
Alexander Valchev
the Telerik team

[ahmed]

Hi Alexander,

there is two problems with that:
1- if i open this view on my iphone and left it for a while it crashes and browser closes
2- when i add a new entry in the observable collection whole chart refreshed and redraw every point again but not only the new added point.

Kindly find attached example i made and these two issues happened with.
i am waiting your response and help in these two issues.

Thanks.

[Alexander Valchev]

Hi Ahmed,

Thank you for the provided example. Regarding your questions:

1. If I open this view on my iphone and left it for a while it crashes and browser closes
   I was able to reproduce the problem. Currently we are investigating memory leak issues which are most likely to cause crash of the browser. This week we plan to upload a new internal build which will contain the related fixes.
   
   
2. When i add a new entry in the observable collection whole chart refreshed and redraw every point again but not only the new added point.
   Actually this is the expected behaviour - when the data changes the whole chart is supposed to refresh. My recommendation is to turn off the transitions - this will not only make the chart look better on refresh, but also improve the general performance.

Regards,
Alexander Valchev
the Telerik team