How to change Plotbands dynamically

3 posts, 1 answers
  1. kako
    kako avatar
    36 posts
    Member since:
    Mar 2015

    Posted 07 May Link to this post

    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

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2328 posts

    Posted 08 May Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. kako
    kako avatar
    36 posts
    Member since:
    Mar 2015

    Posted 24 May Link to this post

    It worked fine.

    Thank you!

Back to Top