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>
.
