FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Scaling › Reply To: Scaling

October 21, 2019 at 2:08 pm #27174

Ashwin

thanks for the support, and I have an issue there.
https://jsfiddle.net/canvasjs/0gohkjj3/
as per the code ,clicking on the set viewport button – we get the portion ,but when I click on reset button the i didin’t get the old graph. But the pan button i can drag the graph. Is there any solution?

my code is below– scaling.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Scaling </title>
   
        <script type="text/javascript">
            
            window.onload = function(){
                var chart = new CanvasJS.Chart("chartContainer", {
                    zoomEnabled: true,
                    zoomType: "xy",
                    title:{
                      text: "Setting Viewport Based on User Input"
                    },

                    data: [
                      {
                        type: "line",
                        dataPoints: [
                          { x: 10, y: 71 },
                          { x: 20, y: 55},
                          { x: 30, y: 50 },
                          { x: 40, y: 65 },
                          { x: 50, y: 95 },
                          { x: 60, y: 68 },
                          { x: 70, y: 28 },
                          { x: 80, y: 34 },
                          { x: 90, y: 14}
                        ]
                      }
                    ]
                 });

             chart.render(); 
             var setButton=document.getElementById("setViewports");
             var xMin=document.getElementById("xMinimum");
             var xMax=document.getElementById("xMaximum");
             setButton.addEventListener("click",setViewports);

             function setViewports(){

                    alert(xMax.value);
                    alert(xMin.value);
                    if(xMax.value)
                       chart.axisX[0].set("viewportMaximum", xMax.value);
                    else
                       chart.axisX[0].set("viewportMaximum",null);
                    if(xMin.value)
                       chart.axisX[0].set("viewportMinimum", xMin.value);
                    else
                       chart.axisX[0].set("viewportMinimum",null);
                 };
            };
            
            //var button=document.getElementById("setViewports");
        
            
         </script>
        
    </head>
    <body>
        <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
        
        <div id="chartContainer" style="height: 400px; width: 80%;"></div>
        <br><br>
        <div>
          X Min : <input id="xMinimum" type="text" placeholder="Enter X Minimum" > 
          X Max : <input id="xMaximum" type="text" placeholder="Enter X Maximum" >
          <br>
          Y Min : <input id="yMinimum" type="text" placeholder="Enter Y Minimum" > 
          Y Max : <input id="yMaximum" type="text" placeholder="Enter Y Maximum" >
          <button id="setViewports" type="button">Change Viewports</button>
        </div>
        </body>
</html>