<!doctype html>
<html>
<head>
<title>Chart.js Documentation</title>
<link href="styles.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="prettify.js"></script>
<script src="Chart.js"></script>
<script type="text/javascript" src="//use.typekit.net/puc1imu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class="redBorder"></div>
<div class="greenBorder"></div>
<div class="yellowBorder"></div>
<div id="wrapper">
<nav>
<dl>
</dl>
</nav>
<div id="contentWrapper">
<h1 id="mainHeader">Chart.js Documentation</h1>
<h2 id="introText">Everything you need to know to create great looking charts using Chart.js</h2>
<article id="gettingStarted">
<h1>Getting started</h1>
<h2>Include Chart.js</h2>
<p>First we need to include the Chart.js library on the page. The library occupies a global variable of <code>Chart</code>.</p>
<pre data-type="html"><code><script src="Chart.js"></script></code></pre>
<h2>Creating a chart</h2>
<p>To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example.</p>
<pre data-type="html"><code><canvas id="myChart" width="400" height="400"></canvas></code></pre>
<pre data-type="javascript"><code>//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);</code></pre>
<p>We can also get the context of our canvas with jQuery. To do this, we need to get the DOM node out of the jQuery collection, and call the <code>getContext("2d")</code> method on that.</p>
<pre data-type="javascript"><code>//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);</code></pre>
<p>After we've instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays.</p>
<p>With the Chart class set up, we can go on to create one of the charts Chart.js has available. In the example below, we would be drawing a Polar area chart.</p>
<pre data-type="javascript"><code>new Chart(ctx).PolarArea(data,options);</code></pre>
<p>We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the options you pass in with the default options for that chart type.</p>
</article>
<article id="lineChart">
<h1>Line chart</h1>
<h2>Introduction</h2>
<p>A line chart is a way of plotting data points on a line.</p>
<p>Often, it is used to show trend data, and the comparison of two data sets.</p>
<h2>Example usage</h2>
<canvas id="line" data-type="Line" width="600" height="400"></canvas>
<pre data-type="javascript"><code>new Chart(ctx).Line(data,options);</code></pre>
<h2>Data structure</h2>
<pre data-type="javascript"><code data-for="line">var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}</code></pre>
<p>The line chart requires an array of labels for each of the data points. This is show on the X axis.</p>
<p>The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.</p>
<h2>Chart options</h2>
<pre data-type="javascript"><code>Line.defaults = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
}</code></pre>
</article>
<article id="barChart">
<h1>Bar chart</h1>
<h2>Introduction</h2>
<p>A bar chart is a way of showing data as bars.</p>
<p>It is sometimes used to show trend data, and the comparison of multiple data sets side by side.</p>
<h2>Example usage</h2>
<canvas id="bar" data-type="Bar" width="600" height="400"></canvas>
<pre data-type="javascript"><code>new Chart(ctx).Bar(data,options);</code></pre>
<h2>Data structure</h2>
<pre data-type="javascript"><code data-for="bar">var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27,100]
}
]
}</code></pre>
<p>The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data. Again, colours are in CSS format.</p>
<p>We have an array of labels too for display. In the example, we are showing the same data as the previous line chart example.</p>
<h2>Chart options</h2>
<pre data-type="javascript"><code>Bar.defaults = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starti