Kendo ui - Stock Chart data-navigator

[Anıl]

I'm using kendo ui stockchart component using its data attributes as below:

<div
id="symbolChart"
data-role="stockchart"
data-series="[{ type: 'candlestick', openField: 'open', highField: 'high', lowField: 'low', closeField: 'close' }]"
data-category-axis="{ type: 'Date', baseUnit: 'days', field: 'time', labels: { rotation: 0, dateFormats: { days: 'MMM/dd'} } }"
data-date="{ field: 'time' }"
data-navigator="{ series: { type: 'area', field: 'high' }, select: { from: '2013/04/27', to: '2013/05/02' } }"
data-bind="source: dataSource">

And here is the json data I'm binding to my chart:

[{"id":0,"symbol":"EURUSD","time":"2013-04-25T00:00:00","open":1.2905,"close":1.3693,"low":6.1983,"high":1.2002,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-04-26T00:00:00","open":1.2905,"close":1.3693,"low":6.1983,"high":1.2002,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-04-27T00:00:00","open":1.2905,"close":1.3693,"low":6.1983,"high":1.2002,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-04-28T00:00:00","open":1.2905,"close":1.3693,"low":6.1983,"high":1.2002,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-04-29T00:00:00","open":1.1505,"close":2.2093,"low":3.1983,"high":1.1902,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-04-30T00:00:00","open":1.1005,"close":1.2093,"low":1.3983,"high":1.4002,"direction":null,"digits":0,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-05-01T00:00:00","open":1.2015,"close":3.2093,"low":1.2983,"high":1.1102,"direction":null,"digits":0,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-05-02T00:00:00","open":1.2005,"close":1.7893,"low":1.1983,"high":1.3502,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-05-03T00:00:00","open":1.2005,"close":1.7893,"low":1.1983,"high":1.3502,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null},{"id":0,"symbol":"EURUSD","time":"2013-05-04T00:00:00","open":1.2005,"close":1.7893,"low":1.1983,"high":1.3502,"direction":null,"digits":1,"spread":null,"modify_time":null,"mt4_server_id":null}]

But the navigator part of the chart is not rendering as expected. Am I doing a wrong configuration for the data-navigator attribute? Here is the screen shot of the result chart: http://i.stack.imgur.com/tbdZ0.jpg

[Iliana Dyankova]

Hi Anıl,

The issue is caused by incorrect syntax - it should be data-date-field="time" (not "data-date="{ field: 'time' }""). I.e.: 

<div id="symbolChart"
    //....
    data-date-field="time"
</div>

Regards,

Iliana Nikolova
the Telerik team