Here is the code, it is not zooming, if you change one of the y value from 12592 to 12592.1, then zooming works. Please fix this ASAP as our users are complaining about this. <!DOCTYPE HTML> <html> <head> <script type=”text/javascript”> window.onload = function () { var chart = new CanvasJS.Chart(“chartContainer”, { zoomEnabled: true, zoomType: “xy”, title:{ text: “Earthquakes – per month” }, axisX: { valueFormatString: “MMM”, interval:1, intervalType: “month” }, axisY:{ includeZero: false }, data:[{“type”:”line”,”markerType”:”none”,”toolTipContent”:null,”fillOpacity”:0.5,”name”:”Series1-avg”,”showInLegend”:false,”dataPoints”:[{“x”:0,”label”:”08/20/2016″,”y”:12592},{“x”:1,”label”:”08/21/2016″,”y”:12592},{“x”:2,”label”:”08/22/2016″,”y”:12592},{“x”:3,”label”:”08/23/2016″,”y”:12592},{“x”:4,”label”:”08/24/2016″,”y”:12592},{“x”:5,”label”:”08/25/2016″,”y”:12592},{“x”:6,”label”:”08/26/2016″,”y”:12592},{“x”:7,”label”:”08/27/2016″,”y”:12592},{“x”:8,”label”:”08/28/2016″,”y”:12592},{“x”:9,”label”:”08/29/2016″,”y”:12592},{“x”:10,”label”:”08/30/2016″,”y”:12592}],”color”:”#D3D3D3″},{“type”:”line”,”markerType”:”none”,”toolTipContent”:null,”fillOpacity”:0.5,”name”:”Series2-avg”,”showInLegend”:false,”dataPoints”:[{“x”:2.05,”label”:”08/22/2016″,”y”:12592},{“x”:3.05,”label”:”08/23/2016″,”y”:12592},{“x”:4.05,”label”:”08/24/2016″,”y”:12592},{“x”:5.05,”label”:”08/25/2016″,”y”:12592},{“x”:6.05,”label”:”08/26/2016″,”y”:12592},{“x”:9.05,”label”:”08/29/2016″,”y”:12592},{“x”:10.05,”label”:”08/30/2016″,”y”:12592}],”color”:”#32CD32″},{“type”:”line”,”markerType”:”none”,”toolTipContent”:null,”fillOpacity”:0.5,”name”:”Series3-avg”,”showInLegend”:false,”dataPoints”:[{“x”:0.1,”label”:”08/20/2016″,”y”:12592},{“x”:2.1,”label”:”08/22/2016″,”y”:12592},{“x”:3.1,”label”:”08/23/2016″,”y”:12592},{“x”:4.1,”label”:”08/24/2016″,”y”:12592},{“x”:5.1,”label”:”08/25/2016″,”y”:12592},{“x”:6.1,”label”:”08/26/2016″,”y”:12592},{“x”:7.1,”label”:”08/27/2016″,”y”:12592},{“x”:9.1,”label”:”08/29/2016″,”y”:12568},{“x”:10.1,”label”:”08/30/2016″,”y”:12568}],”color”:”#1E90FF”}] }); chart.render(); } </script> <script type=”text/javascript” src=”https://cdn.canvasjs.com/canvasjs.min.js”></script></head> <body> <div id=”chartContainer” style=”height: 300px; width: 100%;”> </div> </body> </html>

@xiaosongzou, The behavior is designed like that. Zooming area is invalidated based on the minimum-difference between the dataPoints as of now. We will reconsider this behavior and get back to you at the earliest.

Please note Series 3 in the above fiddle example. not all the data points have the same value.

xiaosongzou, It is designed this way. We don't see a point in zooming a chart if all the dataPoints represent the exact same value.

Your posted code needed quite a bit of cleanup, but I have made a fiddle for you, so it can bee addressed more easily:

zooming not working

This topic has 6 replies, 3 voices, and was last updated 7 years, 4 months ago by Bivek Singh.

Viewing 7 posts - 1 through 7 (of 7 total)

Tagged: zoom

September 2, 2016 at 6:21 am #12270

xiaosongzou

Here is the code, it is not zooming, if you change one of the y value from 12592 to 12592.1, then zooming works.
Please fix this ASAP as our users are complaining about this.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
zoomEnabled: true,
zoomType: “xy”,
title:{
text: “Earthquakes – per month”
},
axisX: {
valueFormatString: “MMM”,
interval:1,
intervalType: “month”
},
axisY:{
includeZero: false

},
data:[{“type”:”line”,”markerType”:”none”,”toolTipContent”:null,”fillOpacity”:0.5,”name”:”Series1-avg”,”showInLegend”:false,”dataPoints”:[{“x”:0,”label”:”08/20/2016″,”y”:12592},{“x”:1,”label”:”08/21/2016″,”y”:12592},{“x”:2,”label”:”08/22/2016″,”y”:12592},{“x”:3,”label”:”08/23/2016″,”y”:12592},{“x”:4,”label”:”08/24/2016″,”y”:12592},{“x”:5,”label”:”08/25/2016″,”y”:12592},{“x”:6,”label”:”08/26/2016″,”y”:12592},{“x”:7,”label”:”08/27/2016″,”y”:12592},{“x”:8,”label”:”08/28/2016″,”y”:12592},{“x”:9,”label”:”08/29/2016″,”y”:12592},{“x”:10,”label”:”08/30/2016″,”y”:12592}],”color”:”#D3D3D3″},{“type”:”line”,”markerType”:”none”,”toolTipContent”:null,”fillOpacity”:0.5,”name”:”Series2-avg”,”showInLegend”:false,”dataPoints”:[{“x”:2.05,”label”:”08/22/2016″,”y”:12592},{“x”:3.05,”label”:”08/23/2016″,”y”:12592},{“x”:4.05,”label”:”08/24/2016″,”y”:12592},{“x”:5.05,”label”:”08/25/2016″,”y”:12592},{“x”:6.05,”label”:”08/26/2016″,”y”:12592},{“x”:9.05,”label”:”08/29/2016″,”y”:12592},{“x”:10.05,”label”:”08/30/2016″,”y”:12592}],”color”:”#32CD32″},{“type”:”line”,”markerType”:”none”,”toolTipContent”:null,”fillOpacity”:0.5,”name”:”Series3-avg”,”showInLegend”:false,”dataPoints”:[{“x”:0.1,”label”:”08/20/2016″,”y”:12592},{“x”:2.1,”label”:”08/22/2016″,”y”:12592},{“x”:3.1,”label”:”08/23/2016″,”y”:12592},{“x”:4.1,”label”:”08/24/2016″,”y”:12592},{“x”:5.1,”label”:”08/25/2016″,”y”:12592},{“x”:6.1,”label”:”08/26/2016″,”y”:12592},{“x”:7.1,”label”:”08/27/2016″,”y”:12592},{“x”:9.1,”label”:”08/29/2016″,”y”:12568},{“x”:10.1,”label”:”08/30/2016″,”y”:12568}],”color”:”#1E90FF”}]

});

chart.render();
}
</script>
<script type=”text/javascript” src=”https://cdn.canvasjs.com/canvasjs.min.js”></script></head>
<body>
<div id=”chartContainer” style=”height: 300px; width: 100%;”>
</div>
</body>
</html>

September 2, 2016 at 6:48 am #12271

xiaosongzou

by the way, if you add 0.1 to all y value, it is not working either

September 2, 2016 at 2:08 pm #12280
Eesger
Your posted code needed quite a bit of cleanup, but I have made a fiddle for you, so it can bee addressed more easily:
- This reply was modified 7 years, 7 months ago by Eesger. Reason: link fixed
November 29, 2016 at 5:54 am #13518

xiaosongzou

Ping!

November 29, 2016 at 3:57 pm #13522

Bivek Singh

xiaosongzou,

It is designed this way. We don’t see a point in zooming a chart if all the dataPoints represent the exact same value.

November 30, 2016 at 1:07 am #13526

xiaosongzou

Please note Series 3 in the above fiddle example. not all the data points have the same value.

November 30, 2016 at 7:42 pm #13537

Bivek Singh

@xiaosongzou,

The behavior is designed like that. Zooming area is invalidated based on the minimum-difference between the dataPoints as of now. We will reconsider this behavior and get back to you at the earliest.