Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by melitica

HTML

<script src="http://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" value="User Value"></input>
        <p id="currentValue">Current value:</p>
    </div>
    <button id="button-play" class="button-play pure-button" onClick="runGraph();">Run!</button>
    <button class="button-reset pure-button" onClick="runGraph();">Reset</button>
    <button class="button-stop pure-button" onClick="stopGraph(intervalId);">Stop</button>
</div>
<div id="chartContainer" style="height: 300px; width:80%; float: right;"></div>

JavaScript

var runGraph = function () {

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

           var dps = []; // dataPoints

           var chart = new CanvasJS.Chart("chartContainer", {
               axisX: {
                   title: "Time in Seconds",
                   interval: 1
               },

               axisY: {
                   title: "Profit",
                   maximum: 2,
               },

               title: {
                   text: "Profit Data Graph"
               },
               data: [{
                   type: "line",
                   dataPoints: dps
               }]
           });

           var xVal = 0;
           var yVal = 2;
           var updateInterval = 3000;
           var dataLength = 10; // number of dataPoints visible at any point
           var userValue = document.getElementById('userValue').value;
           var firstTime = true;

           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) {
                       document.getElementById('currentValue').innerHTML += Math.round(yVal * 100) / 100;
                       firstTime = false;
                   }

                   dps.push({
                       x: xVal,
                       y: yVal
                   });
                   xVal++;


               };
               if (dps.length > dataLength) {
                   dps.shift();
               }

               chart.render();

           };



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

           // update chart after specified time. 
           var intervalId = setInterval(function () {
               updateChart()
     ...