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, "graphBGColor": CanvasChart.graphBGColors.money, "drawPointLabels": false, }; if (isBar) { options.chartType = CanvasChart.chartTypes.BAR; } CanvasChart.drawChart(chartCanvas, points, options); }