Making d3.js easy to use - get interactive charts in 5 minutes without dealing with nitty-gritty SVG details
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
OLD
source
.gitignore
LICENSE
README.md
charts.js
charts.min.js
d3.v2.js

README.md

Charts

What is charts.js

charts.js is meant to be an easy to use library to pair complex online charting libraries like d3 or Google's Charting API with easy to use code. The library includes specialization to specific fields like education.

How to use charts.js

  1. Include d3 and charts.js
	<script type="text/javascript" src="d3.v2.js"></script>  
	<script type="text/javascript" src="charts.js"></script>
  1. Choose core charts and wrappers and include files. For example:
	<script type="text/javascript" src="charts/donut.js"></script> <!-- Donut chart -->
	<script type="text/javascript" src="wrappers/behavior.js"></script> <!-- Behavior chart built on top of the Donut charts -->
  1. Optional: create wrappers and charts with charts.extend()
  2. Call functions you need!

Extending charts.js

Copy one of the charts under source/charts to create a customized visualization. If you make an interesting chart, please send a pull request to add it to the main project.

Core Charts (charts/)

Donut (donut.js)

charts.donut({  
    data: [172,136,135,10], 	  // Required  
    labels: ["a", "b", "c", "d"], // Default: []  
    centerLabel: 'Label', 		  // Default: ''  
    container: 'body', 			  // Default: 'body'  
    width: 400, 				  // Default: 400  
    height: 400 				  // Default: 400  
});

Wrappers (wrappers/)

Behavior (behavior.js)

charts.behavior({  
    'participation':1,  
    'productivity':2,  
    'excitment':1  
}, 'body');

Creating wrappers & charts

Implementation of behavior chart:

charts.extend({  
	behavior: function(data,sel,w,h) {  
		var labels = [], values = [], j=0;  
		for(var i in data) {  
			labels[j] = i;  
			values[j] = data[i];  
			j++;  
		}  
		this.donut({  
			data: values,  
			labels: labels,  
			centerLabel: 'Behavior',  
			container: sel  
		});  
	}  
});