How to change Plotbands dynamically

[kako]

Hello.

I want to change the position of PlotBands of CategoryAxis when contents of Datasource are changed.

Is there how to change Plotbands dynamically?

I tried writing the code as follows, but it did not work.

https://dojo.telerik.com/uzefAkIl

[Tsvetina]

Hello Kako,

The general approach is correct, but the plot bands code in the Dojo runs before the Chart is initialized, so there is no Chart instance to work with.
I moved the logic into a button click event handler. Also, because there is no schema.model defined in the dataSource, year values come as strings, so they should be parsed to int before compared to currentYMD.

function showPlotBand(){
  var currentYMD = 2001; // Originally, It changes dynamically between 2000 and 2008.

  var chart = $("#chart").data("kendoChart");
  var data = chart.dataSource.view();
  var options = {};

  var start, end = 0;
  for(var i = 0; i <= data.length; i++){
    if(parseInt(data[i]["year"]) === currentYMD) {
      start = i;
      end = i+1;
      break;
    }
  }
  options["categoryAxis"] = { plotBands: [{ from: start, to: end, color: "red", opacity: 0.3 }] };
  chart.setOptions(options);
}

Here is the modified working sample:
https://dojo.telerik.com/uzefAkIl/2

Regards,
Tsvetina
Progress Telerik

[kako]

It worked fine.

Thank you!