Sets the rangeChanging event handler for Chart which is triggered before viewportMinimum or viewportMaximum are updated while zooming, panning, or reset. Upon event, a parameter that contains event related data is sent to the assigned event handler. Parameter includes trigger, type and axes viewportMinimum and viewportMaximum corresponding to the event.
var chart = new CanvasJS.Chart("container",
{
.
.
zoomEnabled: true,
.
rangeChanging: function(e){
console.log("type : " + e.type + ", trigger : " + e.trigger + ",
AxisX viewportMininum : " + e.axisX[0].viewportMinimum + ",
AxisX viewportMaximum : " + e.axisX[0].viewportMaximum);
},
.
.
.
});
chart.render();
e:{
type, // event type - "rangeChaning" or "rangeChanged"
trigger, // "zoom", "pan", "reset"
chart,
axisX:[{ // retuned only if axisX is present
viewportMinimum, //null for zoomType: "y"
viewportMaximum
},
.
.
],
axisY:[{ // retuned only if axisY is present
viewportMinimum, //null for zoomType: "x"
viewportMaximum
},
.
.
],
axisX2:[{ // retuned only if axisX2 is present
viewportMinimum, //null for zoomType: "y"
viewportMaximum
},
.
.
],
axisY2:[{ // retuned only if axisY2 is present
viewportMinimum, //null for zoomType: "x"
viewportMaximum
},
.
.
]
}
Also See:
Comments 7
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Hello,
I am trying dynamic charts(from trial to enterprise app), must say very nice and usefule charts.
Have a question though, about dynamic charts(https://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/); be default the direction of chart movement is from Right towards Left.
Is there a property or way to reverse this(i.e. from Left –> Right), something like animationDirection?
Looked for properties but could not find anythig.
Would appreciate a working sample if possible.
Thanks,
Deepak
Deepak,
Chart movement depends on the dataPoints being added. The dataPoints are being added towards the right of existing values, instead you can add dataPoints towards left and the movement of chart changes.
Vishwas, not very clear by what you mean.
Can you a quick example about the same or some sample code?
Thanks in advacne.
Deepak,
By adding x-values higher than previous value, it looks like chart is moving from right to left. Similarly when you add x-value lesser than previous values, it looks likes it is moving from left to right.
Here is an example.
Thanks, shall give it a try.
Looks like something what I was looking for.
Hello,
The chart renders fine, but when I use it inside a with ng-repeat, the chart does not render, while outside this it works fine.
Code is something like this:
————————————–
// this one renders fine
// this one does not
{{user.Name}}
———————————————–
Rest of the code is similar to one in your example.
Any pointers would be helpful.
Thanks
Not ableto paste my code in comment for some reason.
But the requirement is to show multiple charts, inside a div which is using ng-repeat to loop and show some data.
The cart display outside this div works fine, but when used inside div with ng-repeat, the chart does not render.