rangeChanged: Function

Sets the rangeChanged Event handler for StockChart which is triggered after the range of StockChart is changed / updated upon zooming / panning through slider or through charts or by selecting the range buttons or by changing the value in the inputfields of range selector.

When event is triggered, a parameter that contains event related data is passed to the assigned event handler. Parameter includes source, minimum and maximum value corresponding to the event.


Note
  • rangeChanged is triggered only when the range of the StockChart is changed manually using mouse/pointer (zooming/panning/sliding) and it doesn’t trigger when range of StockChart are set programmatically.
  • rangeChanged can be used to load the data asynchronously.

Default: null
Options: rangeChanged: function(e) { alert ( “Event Source: ” + e.source ) }

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeChanged: function(e) { 
   console.log("Source: "+ e.source + ,
     "Minimum: "+ e.minimum,
     "Maximum: "+ e.maximum )
 },
 .
 . 
});
stockChart.render();

Event Object

e: {
      type, // event type - "rangeChanging" or "rangeChanged"
      source, // "chart", "buttons" , "inputFields", "navigator"
      index, // sets only if source is chart or buttons else null
      minimum,
      maximum,
      stockChart
}



Try it Yourself by Editing the Code below.




If you have any questions, please feel free to ask in our forums.