Kendo ui - Stock Chart data-navigator

2 posts, 0 answers
  1. Anıl
    Anıl avatar
    6 posts
    Member since:
    Feb 2012

    Posted 10 May 2013 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 13 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top