CanvasChart.js, my HTML5/JS Charting Library

For a Windows 8 sample I was working on (the example Stocks App) I needed to produce a first-party library for charting the actual stocks.  The following video shows the library I created:

There have been various bug fixes and enhancements added to the library in the time since we released the sample.  These are all captured in a newer version of my HTML5 / JS Canvas charting library.  Usage works as follows:

Include the library:

<script src="js/canvasChart.js"></script>

Add a canvas element with the id set to your target id:

<canvas id="chart" height="450" width="1024" ></canvas>

Configure and render the chart:

function exampleUsage(chartCanvas, isBar) {
    var points = new Array();
    points[0]  = new Array();
    var numPoints = 10, range = 100;
    for (var count = 0; count < numPoints; count++) {
        var value = Math.random() * range;
        points[0][count] = new CanvasChart.Point(count, value);
    var options = {
        "drawLines": true,
        "drawElbows": true,        
        "drawPointLabels": false,        
    if (isBar) {
        options.chartType = CanvasChart.chartTypes.BAR;
    CanvasChart.drawChart(chartCanvas, points, options);