Add series dynamically to the navigator

6 posts, 1 answers
  1. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 15 Apr 2013 Link to this post

    Hi,

    How do I access the properties of the stock chart's navigator? I can access the chart's options like so:                    

    var chart =  $("#stock-chart").data("kendoStockChart");
    var chartOptions = chart.options;

    but I am not having any luck with the navigator. I would like to add series and access other properties programmatically.

    Thanks,
    Tonih
  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2811 posts

    Posted 17 Apr 2013 Link to this post

    Hello,

    Currently, the navigator series are merged with the rest of the series during initialization. This, along with some other implementation details, make adding navigator series at run-time impossible. 

    My only suggestion is to re-create the chart when adding navigator series (demo).

    I hope this helps.

    All the best,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 18 Apr 2013 Link to this post

    Hi Tsvetomir,

    Thank you for your timely solution, I've integrated it into my project and I am now about halfway there. This solution assumes I have only one series with multiple data points however, what if I have multiple series to plot? I would like to update the chart and navigator simultaneously with multiple series. Currently, when I add to the datasource, it removes the previous series and adds the new one. Ideally it should keep the previous and just add the new. Would something like that require a different architecture or do I have to some way incorporate series.data?  I also tried using HierarchicalDataSource but to no avail. Thanks much.

    Tonih
  4. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 18 Apr 2013 Link to this post

    Nevermind, I believe I just fixed this with the group object. My datasource tags now look like:

    dataSource: {
              data: [{
                Date: new Date("2012-04-10"),
                Open: 10,
                High: 15,
                Low: 8,
                Close: 9
              }, {
                Date: new Date("2012-04-14"),
                Open: 10,
                High: 15,
                Low: 8,
                Close: 9
              }]
             group: {
               field: "Name",
               dir: "asc"
             }
        }

    Once again thanks much for your assistance!
  5. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 17 May 2013 Link to this post

    Hi,

    Using the example you provided - http://jsbin.com/orabax/1/edit, I cannot for the life of me figure out how to control the colors of the series. How would I do so using the example you provided?

    Thanks much,
    Tonih
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2811 posts

    Posted 18 May 2013 Link to this post

    Hello,

    The colors are picked up from seriesColors. You can provide your own color as part of the series definition:

           config.navigator.series.push({
              axis: "_navigator",
              type: "area",
              field: "High",
              color: "red"
            });

    I've updated the demo: http://jsbin.com/orabax/8/edit

    All the best,
    Tsvetomir Tsonev
    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