d3-gems

Collection of reusable widgets powered by d3.js

JavaScript Example

Sample code below shows how to render chart.

1// first write/generate chart definition
2var column_chart = {
3	type: "column",
4	axes: {
5		x: {majorTicks: "outside"},
6		y: {
7			majorTicks: "outside",
8			scalar: true,
9			margin: true,
10			grid: { major: true, minor: false }
11		}
12	},
13	categories: ["A", "B", "A"],
14	series: {
15		Revenue: [90, 70, 95],
16		Units: [30, 25, 27]
17	},
18	title: {
19		text: "Test Chart",
20		position: "center"
21	},
22	legend: {
23		position: "topright"
24	}
25};
26
27// then render chart
28$(function(){
29	$('.chart')
30		.data('chart', column_chart)
31		.chart();
32});

See also examples at demo folder.