Show current dataPoints on click - CanvasJS

Show current dataPoints on click - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="user-input-container">
    <div id="user-value" style="margin-bottom: 10px; margin-top: 10px;">
        <label for="userValue">User value:</label>
        <input type="text" size="10" id="userValue" placeHolder="Enter a value"></input>
        <p id="currentValue">Current value:</p>
    </div>
    <button id="run" class="button-play pure-button">Run!</button>
    <button id="reset" class="button-reset pure-button">Reset</button>
    <button id="stop" class="button-stop pure-button">Stop</button>
</div>
<div id="chartContainer" style="height: 300px; width:80%; float: right;"></div>

JavaScript

var newDps = [];
var chart;
var updatedInterval;
        
function runGraph() {

	document.getElementById('currentValue').innerHTML = "Current value: ";                

	var dps = [];

	chart = new CanvasJS.Chart("chartContainer", {
		axisX: {
			title: "Time in Seconds",
			interval: 1
		},
		axisY: {
			title: "Profit"
		},
		title: {
			text: "Profit Data Graph"
		},
		data: [{
			type: "line",
			dataPoints: dps
		}]
	});

	var xVal = 0;
	var yVal = 2;                
	var dataLength = 10; // number of dataPoints visible at any point
	var userValue = document.getElementById('userValue').value;
	var firstTime = true;
	var updateInterval = 1000;
	
	var updateChart = function (count) {
		count = count || 1;
		// count is number of times loop runs to generate random dataPoints.
		for (var j = 0; j < count; j++) {
			var stoch = Math.random();
			yVal = 1 - (Math.pow((userValue - stoch), 2));
			if (firstTime) {
				var value = Math.round(yVal * 100) / 100;
				document.getElementById('currentValue').innerHTML += value;
				firstTime = false;
			}
			
			dps.push({ x: xVal, y: yVal });                                          
			xVal++;                       
		};   
		
		if (dps.length > dataLength) {
			dps.shift();
			newDps = dps;
		}
		chart.render();
	};

	// generates first set of dataPoints
	updateChart(dataLength);

	// update chart after specified time. 
	updatedInterval = setInterval(function () { updateChart() }, updateInterval);               
}
           
function stopGraph() {
	chart.options.data[0].dataPoints = newDps;
	chart.render();
	clearInterval(updatedInterval);
}

var run = document.getElementById( "run" );
run.addEventListener( "click",  runGraph);

var reset = document.getElementById( "reset" );
reset.addEventListener( "click",  runGraph);

var stop = document.getElementById( "stop" );
stop.addEventListener( "click",  stopGraph);