To use the Chart widget the chart.js, canvaschartpainter.js and canvaschart.css files needs to be included. Furthermore for IE support the excanvas.js files needs to be included.
<script type="text/javascript" src="includes/excanvas.js"></script> <script type="text/javascript" src="includes/chart.js"></script> <script type="text/javascript" src="includes/canvaschartpainter.js"></script> <link rel="stylesheet" type="text/css" href="includes/canvaschart.css" />
Once the includes are in place a container for the chart needs to be added to the document. This is where the chart will be drawn and the size and location of the container determines these properites of the chart as well.
To create a chart thats 400 by 200 insert the following HTML code where the chart should appear. Memorize the id of the container as we'll be using that later to draw the chart.
<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>
The first thing one has to do to draw a chart is to create an instance
of the Chart class. The constructor takes a single parameter, a
reference to the container element. So to create a Chart object from the
container we just created the following JavaScript code is used;
var c = new Chart(document.getElementById('chart'));
Once that's done, let's set a few parameters.
c.setDefaultType(CHART_AREA | CHART_STACKED); c.setGridDensity(5, 5); c.setVerticalRange(0, 200); c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
The first line will set the default chart type to stacked area. The second sets the The x and y-axis density to 10, which controls the number of grid lines and labels. The third and fourth sets the range and the labels for the horizontal axis.
Now the series can be added to the chart.
c.add('Spam', '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
c.add('Innocent', '#8080FF', [ 8, 7, 12, 20, 24, 16, 36, 28, 28, 45]);
c.add('Missed Spam', '#A5A5FF', [ 8, 7, 12, 20, 24, 16, 36, 36, 18, 5]);
c.add('False Positives', '#DEDEFF', [ 1, 2, 3, 2, 1, 4, 18, 12, 8, 7]);
The first argument is the label, which will be shown in the legend. The second is the color that will be used to draw the series and the third is an array with the values that makes up the series.
At this time we're almost done. A component object has been created, the
options set and the series added. All that remains is to call the draw
method, c.draw();. This will draw the chart onto the
container.
For it to work properly in IE with IECanvas the canvas emulation must
be initialized prior to calling the draw method. It's therefore
recommended to include an onload handler that does that, either by
including the following in the body tag onload="ieCanvasInit('includes/iecanvas.htc');"
or this in a script block window.onload = function() { ieCanvasInit('includes/iecanvas.htc'); };.
You might also want to call the chart creation code from there.
Putting it all together:
function draw() {
var c = new Chart(document.getElementById('chart'));
c.setDefaultType(CHART_AREA | CHART_STACKED);
c.setGridDensity(5, 5);
c.setVerticalRange(0, 100);
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
c.add('Spam', '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
c.add('Innocent', '#8080FF', [ 8, 7, 12, 20, 24, 16, 36, 28, 28, 45]);
c.add('Missed Spam', '#A5A5FF', [ 8, 7, 12, 20, 24, 16, 36, 36, 18, 5]);
c.add('False Positives', '#DEDEFF', [ 1, 2, 3, 2, 1, 4, 18, 12, 8, 7]);
c.draw();
}
window.onload = function() {
ieCanvasInit('includes/iecanvas.htc');
draw();
};
Introduction
Implementation
Usage
API
Demo
SVG Demo (mozilla/opera only)
JsGraphics Demo
Download