The main goal during development was to pick sane defaults in order to let the user create simple charts quickly with just a couple of lines of code.
One can create at almost no time bar, pie, doughnut and Pareto charts.
You can get awesomechart.js from the project's github repository.
Copyright 2011 Georgios Migdos - Available under the terms of the Apache License v2.0 .
Let's say we want to create a bar chart for the following data:
Product Sales - 2010
- Desktops: 1532
- Laptops: 3251
- Netbooks: 3460
- Tablets: 1180
- Smartphones: 6543
First, we have to define a canvas element in our html document:
<canvas id="canvas1" width="300" height="300"> Your web-browser does not support the HTML 5 canvas element. </canvas>
Then all we have to do is include awesomechart.js in our document's header, create a new AwesomeChart object and pass our data to it:
The code above will produce the following result:
But, what if we want to change the chart type to a doughnut chart? It's really easy, we just have to set the chart's type to 'doughnut' before calling draw():
mychart.chartType = 'doughnut'; mychart.draw();
This is the result:
Or we could create a Pareto chart (chartType='pareto'):
The 'chartType' property controls which type of chart will be rendered:
|Chart type||chartType property value|
|Horizontal bar chart||default|
|Vertical bar chart||horizontal bars|
|Exploded chart||exploded pie|