Dynamic Chart Example - CanvasJS

Example of an HTML5 Dynamic Chart using CanvasJS. Updates every second

by Jaime Romero

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<p class="description">A Dynamic Chart built using CanvasJS. Updates every second.<br/> Built using <a href="http://canvasjs.com" title="CanvasJS HTML5 Charts" target="_blank">CanvasJS</a>
</p>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

var dps = []; // dataPoints
            var instance = (new Date()).getTime();
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Live SpO2 Data"
                },
                axisX: {
                    title: "Time",
                    valueFormatString: "hh:mm:ss"
                },

                axisY: {
                    title: "%SpO2",
                },
                data: [{
                    type: "spline",
                    xValueType: "dateTime",
                    dataPoints: dps
                }]
            });

            var yVal =...