Zoom shortcut for Stock Chart

[Philippe]

Hi, 

I want to create multiple zoom shortcuts for my kendo chart stock. ex: 3 months,6 months, 1 year and all.

Basically, when a user click on the zoom button "3 months", the navigator must cover only three months and the chart must display only three months of data. When "all" is clicked on , the navigator must cover all the available time and the chart must display all data.

Basically the behavior that I want is shown in this link  : behavior wanted

Is there a way to do that using the kendo stock chart ?

 

 

 

 

[Tsvetina]

Hi Philippe,

You can see a sample implementation in this Dojo:
https://dojo.telerik.com/oqIwAyAg/4

The idea is to manually change the range of the navigator on click of one of the buttons in the ButtonGroup.

var maxValue;
var minValue;
$("#select-period").kendoButtonGroup({
  index: 4,
  select: function(e){
    var index = this.current().index();
    var chart = $("#stock-chart").data("kendoStockChart");
    if(chart){
      var fromDateTime = new Date(maxValue.getTime());
      var axisOptions = chart.options.categoryAxis;
      switch(index){
        case 0:
          fromDateTime.setMonth(fromDateTime.getMonth() - 3);
          chart.navigator.options.select.from = fromDateTime;
          break;
        case 1:
          fromDateTime.setMonth(fromDateTime.getMonth() - 6);
          chart.navigator.options.select.from = fromDateTime;
          break;
        case 2:
          fromDateTime.setFullYear( fromDateTime.getFullYear() - 1 );
          chart.navigator.options.select.from = fromDateTime;
          break;
        case 3:
          fromDateTime.setFullYear( fromDateTime.getFullYear() - 5 );
          chart.navigator.options.select.from = fromDateTime;
          break;
        case 4:
          chart.navigator.options.select.from = minValue;
          break;
      }

      chart.refresh();
    }
  }
});

I added aggregates to the Chart DataSource, so I can access the min and max values of the Date field and use them to create the navigator ranges:

dataSource: {
  transport: {
    read: {
      url: "../content/dataviz/js/boeing-stock.json",
      dataType: "json"
    }
  },
  schema: {
    model: {
      fields: {
        Date: { type: "date" }
      }
    }
  },
  aggregate: [
    { field: "Date", aggregate: "min"},
    { field: "Date", aggregate: "max"}
  ]
}

$("#stock-chart").data("kendoStockChart").one("dataBound", function(e){
  var aggregates = e.sender.dataSource.aggregates().Date;
  minValue = aggregates.min;
  maxValue = aggregates.max;
});

Regards,
Tsvetina
Progress Telerik