CanvasJS

[http://canvasjs.com/]

  •   |  free, 79$ per site, 299$ per developer

CanvasJS is an easy to use JavaScript & HTML5 Charts library built on Canvas element. It runs across devices including iPhone, iPad, Android, Windows Phone, Microsoft Surface, Desktops, etc. This allows you to create rich dashboards that work on all the devices without compromising on maintainability or functionality of your web application. CanvasJS comes with themes and is over 10x faster than conventional Flash and SVG Charts resulting in lightweight, beautiful and responsive dashboards.

CanvasJS is an easy to use JavaScript & HTML5 Charts library built on Canvas element. It runs across devices including iPhone, iPad, Android, Windows Phone, Microsoft Surface, Desktops, etc. This allows you to create rich dashboards that work on all the devices without compromising on maintainability or functionality of your web application. CanvasJS comes with themes and is over 10x faster than conventional Flash and SVG Charts resulting in lightweight, beautiful and responsive dashboards.

CanvasJS can render 100,000 Data-Points in just around 100 milliseconds. A perfect fit if you are looking for High Performance HTML5 & Javascript Charts. CanvasJS supports 17 different types of Graphs including line, column, spline, area, pie, doughnut, etc. CanvasJS is free for non-commercial and paid for commercial use.





Screenshots





Download Package

Charts Types

Line, column, spline, area, pie, doughnut

Language

Javascript

Rating (more)

Functionality 
Charts types 
Visibility 
Price 
Documentation 
Usability 
Perspectivity 

Total [6.4/10] 

Disadvantages

Expensive for commercial, only 17 charts types

News

Installation & Code samples

There are two source files that come in the downloaded archive: uncompressed file canvasjs.js and compressed file canvasjs.min.js Extract the downloaded file and put the content in the canvasjs folder. Include the file inside the tag of your web page. You can include any of the above two Javascript files. While its ok to use uncompressed version on the development machine, its recommended to use compressed version in the production environment.

Lets create money incoming stacked area chart.

<code> <script type="text/javascript"> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "My incoming money", }, data: [ { type: "stackedArea", dataPoints: [ { x: new Date(2012, 00, 1), y: 1300 }, { x: new Date(2012, 01, 1), y: 1300 }, { x: new Date(2012, 02, 1), y: 1300}, { x: new Date(2012, 03, 1), y: 1300 }, { x: new Date(2012, 04, 1), y: 1300 }, { x: new Date(2012, 05, 1), y: 1300 }, { x: new Date(2012, 06, 1), y: 1300 }, { x: new Date(2012, 07, 1), y: 1500 }, { x: new Date(2012, 08, 1), y: 500 }, { x: new Date(2012, 09, 1), y: 500 }, { x: new Date(2012, 10, 1), y: 500 }, { x: new Date(2012, 11, 1), y: 500 }, ] }, { type: "stackedArea", dataPoints: [ { x: new Date(2012, 00, 1), y: 0 }, { x: new Date(2012, 01, 1), y: 0 }, { x: new Date(2012, 02, 1), y: 0}, { x: new Date(2012, 03, 1), y: 0 }, { x: new Date(2012, 04, 1), y: 0 }, { x: new Date(2012, 05, 1), y: 0 }, { x: new Date(2012, 06, 1), y: 0 }, { x: new Date(2012, 07, 1), y: 1000 }, { x: new Date(2012, 08, 1), y: 1300 }, { x: new Date(2012, 09, 1), y: 1300 }, { x: new Date(2012, 10, 1), y: 1300 }, { x: new Date(2012, 11, 1), y: 1300 }, ] }, { type: "stackedArea", dataPoints: [ { x: new Date(2012, 00, 1), y: 120 }, { x: new Date(2012, 01, 1), y: 141 }, { x: new Date(2012, 02, 1), y: 155 }, { x: new Date(2012, 03, 1), y: 150 }, { x: new Date(2012, 04, 1), y: 165 }, { x: new Date(2012, 05, 1), y: 195 }, { x: new Date(2012, 06, 1), y: 145 }, { x: new Date(2012, 07, 1), y: 195 }, { x: new Date(2012, 08, 1), y: 160 }, { x: new Date(2012, 09, 1), y: 140 }, { x: new Date(2012, 10, 1), y: 140 }, { x: new Date(2012, 11, 1), y: 140 }, ] }, { type: "stackedArea", dataPoints: [ { x: new Date(2012, 00, 1), y: 0 }, { x: new Date(2012, 01, 1), y: 2500 }, { x: new Date(2012, 02, 1), y: 0 }, { x: new Date(2012, 03, 1), y: 0 }, { x: new Date(2012, 04, 1), y: 0 }, { x: new Date(2012, 05, 1), y: 0 }, { x: new Date(2012, 06, 1), y: 0 }, { x: new Date(2012, 07, 1), y: 0 }, { x: new Date(2012, 08, 1), y: 0 }, { x: new Date(2012, 09, 1), y: 500 }, { x: new Date(2012, 10, 1), y: 850 }, { x: new Date(2012, 11, 1), y: 500 }, ] }, ] }); chart.render(); } </script> // include script file <script type="text/javascript" src="canvasjs/canvasjs.min.js"></script> // chart container <div id="chartContainer" style="height: 300px; width: 600px;"></div> </code>

 

Result