Add series dynamically to the navigator

[Tonih]

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

[T. Tsonev]

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

[Tonih]

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

[Tonih]

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!

[Tonih]

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

[T. Tsonev]

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