Showing viewport values on rangeChanged function - CanvasJS JavaScript Charts

Showing viewport values on rangeChanged function - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"> </div>
<label>axisX - viewportMinimum</label>
<input id="minXValue" type="text" placeholder="viewportMinimum will be shown here after rangeChanged" size="60" readonly> <br/>
<label>axisY - viewportMinimum</label> 
<input id="minYValue" type="text" placeholder="viewportMinimum will be shown here after rangeChanged" size="60" readonly> <br/>
<label>axisX - viewportMaximum</label>
<input id="maxXValue" type="text" placeholder="viewportMinimum will be shown here after rangeChanged" size="60" readonly> <br/>
<label>axisY - viewportMaximum</label>
<input id="maxYValue" type="text" placeholder="viewportMinimum will be shown here after rangeChanged" size="60" readonly>

JavaScript

var minXValue = document.getElementById("minXValue");
var maxXValue = document.getElementById("maxXValue");
var minYValue = document.getElementById("minYValue");
var maxYValue = document.getElementById("maxYValue");

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  zoomType: "xy",
  rangeChanged: function(e) {   
    if(e.trigger != "reset") {
      minXValue.setAttribute("Value", new Date(e.axisX[0].viewportMinimum));
      maxXValue.setAttribute("Value", new Date(e.axisX[0].viewportMaximum));
      minYValue.setAttribute("Value", e.axisY[0].viewportMinimum);
      maxYValue.setAttribute("Value", e.axisY[0].viewportMaximum);
    } else {
      minXValue.setAttribute("Value", "");
      maxXValue.setAttribute("Value", "");
      minYValue.setAttribute("Value", "");
      maxYValue.setAttribute("Value", "");
    }
  }, 
  data: [{
    type: "line",
    dataPoints: [
      { x: new Date(2012, 01, 1), y: 26 },
      { x: new Date(2012, 01, 3), y: 38 },
      { x: new Date(2012, 01, 5), y: 43 },
      { x: new Date(2012, 01, 7), y: 29 },
      { x: new Date(2012, 01, 11), y: 41 },
      { x: new Date(2012, 01, 13), y: 54 },
      { x: new Date(2012, 01, 20), y: 66 },
      { x: new Date(2012, 01, 21), y: 60 },
      { x: new Date(2012, 01, 25), y: 53 },
      { x: new Date(2012, 01, 27), y: 60 }
    ]
	}]
});
chart.render();