FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Scaling using X-Y Coordinates

Scaling using X-Y Coordinates

Viewing 2 posts - 1 through 2 (of 2 total)
  • October 10, 2019 at 4:36 pm #27060

    Ashwin

    How can I get the portion of chart below using x,y coordinates?
    How can I get a the portion of a particular graph when i insert the values X-min,X-max,Y-min,Y-max ?(That is, when we use Zoom enable – we drag the mouse on the graph and we get a portion of graph. Like this we did not use the mouse, only from the user input. how can get that particular area?)
    Give me a solution?
    code is below

    <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,
      zoomType: "xy",
      title:{
        text: "Enable Zooming on X & Y Axis"
      },
      legend: {
        horizontalAlign: "right",
        verticalAlign: "center"
      },
      axisY:{
        includeZero: false
      },
      data: data,  // random generator below

   });

    chart.render();
  }

   var limit = 1000;    //increase number of dataPoints by increasing this

    var y = 0;
    var data = []; var dataSeries = { type: "line" };
    var dataPoints = [];
    for (var i = 0; i < limit; i += 1) {
        y += (Math.random() * 10 - 5);
         dataPoints.push({
          x: i - limit / 2,
          y: y
           });
        }
     dataSeries.dataPoints = dataPoints;
     data.push(dataSeries);

  </script>
  <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script></head>
  <body>
    <div id="chartContainer" style="height: 400px; width: 80%;">
    </div>
      <br>
      <br>
    <b>Enter the X-Y Coordinates</b> <br><br>
    
    <div>X-Values:<input id="x1Value" type="number" step="any" placeholder="Enter X-min">
                  <input id="x2Value" type="number" step="any" placeholder="Enter X-max"><br><br>
         Y-Values:<input id="y1Value" type="number" step="any" placeholder="Enter Y-min">
                  <input id="y2Value" type="number" step="any" placeholder="Enter Y-max"><br><br>  
           
          <button id="renderButton">Plot The Portion</button>               
    </div>
  </body>
  </html>
    October 11, 2019 at 12:23 pm #27085

    Vishwas R

    @vpaswin1994,

    You can programmatically zoom / pan to a region by setting viewportMinimum & viewportMaximum. Please take a look at this JSFiddle which shows setting viewport based on values entered in input-fields.

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce your use-case or not able to understand the exact requirements. Having a JSFiddle helps us in understanding your case better and many a times we can just edit your code on JSFiddle to fix the issue right-away. I request you to brief more along with JSFiddle with your use-case if you have further queries or facing any issue.

    Considering this as duplicate of Scaling, hence closing the same.

    —
    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.