Basic Charts

Sample Dataset of Examples

var dataset = [
	{
		name : "series1",
		values : [
			{ x: new Date("2014/01/27"), y: 68.15791393164545 },
			{ x: new Date("2014/01/28"), y: 65.25313461665064 },
			{ x: new Date("2014/01/29"), y: 84.24908308777958 },
			{ x: new Date("2014/01/30"), y: 68.07700398843735 },
			{ x: new Date("2014/01/31"), y: 84.82268058229239 }
		]
	},
	{
		name : "series2",
		values : [
			{ x: new Date("2014/01/27"), y: 82.89636445231736 },
			{ x: new Date("2014/01/28"), y: 68.83642327971758 },
			{ x: new Date("2014/01/29"), y: 60.39617717266083 },
			{ x: new Date("2014/01/30"), y: 56.29262088797987 },
			{ x: new Date("2014/01/31"), y: 59.04308908618987 }
		]
	}
];

Bar

var chart = new ccd3.Chart("chart1-1",dataset);
var options = {
	default_series_type: "bar"
}
chart.setup_options(options);
chart.render();

StackedBar

var chart = new ccd3.Chart("chart1-2",dataset);
var options = {
	default_series_type: "stackedbar"
	yAxis: { domain_min: 0 }
}
chart.setup_options(options);
chart.render();

Line

var chart = new ccd3.Chart("chart1-3",dataset);
var options = {
	default_series_type: "line"
}
chart.setup_options(options);
chart.render();

Scatter

var chart = new ccd3.Chart("chart1-4",dataset);
var options = {
	default_series_type: "scatter"
	series_options: 
		{ scatter: 
			{ point_radius: 5, point_radius_highlight: 10 } }
}
chart.setup_options(options);
chart.render();

Radar

var chart = new ccd3.Chart("chart1-5",dataset);
var options = {
	default_series_type: "radar"
	aAxis: { format: d3.time.format("%m/%d") }
}
chart.setup_options(options);
chart.render();

Pie

// extract first series and deep copy
var data_subset = [ccd3.Util.copy(dataset[0])];
// convert x-data to string
for(var i=0;i
			

Custome Charts

Rotated StackedBar

// deep copy dataset
var dataset2 = ccd3.Util.copy(dataset);
// swap x <-> y
dataset2 = ccd3.Util.swap_dataset_xy(dataset2);

var chart = new ccd3.Chart("chart2-1",dataset2);
var options = {
	default_series_type: "stackedbar",
	xAxis: { domain_min: 0 }
};
chart.setup_options(options);
chart.render();

Normalized StackedBar

var chart = new ccd3.Chart("chart2-2",dataset);
var options = {
	default_series_type: "stackedbar"
	stack_type: "expand",
	show_values: "always",
	yAxis: { domain_min: 0, domain_max:1 }
}
chart.setup_options(options);
chart.render();

Complex Chart

// deep copy dataset
var dataset2 = ccd3.Util.copy(dataset);
dataset2[1].series_type = "line";
	
var chart = new ccd3.Chart("chart2-3",dataset2);
var options = {
	default_series_type: "stackedbar",
};
chart.setup_options(options);
chart.render();

Labeled Chart

var chart = new ccd3.Chart("chart2-4",dataset);
var options = {
	title: { text: "Title Here" },
	xLabel: { text: "xLabel Here" },
	yLabel: { text: "yLabel Here" },
	default_series_type: "stackedbar"
};
chart.setup_options(options);
chart.render();

Simple Small Chart

// use first series only
var dataset2 = [dataset[0]];

var chart = new ccd3.Chart("chart2-5",dataset2);
var options = {
	height: 240,
	width: 240,	
	title: { text: "Simple is BEST", font_size: 10 },
	yAxis: { show_label: false },
	show_values: "always",
	legend: { show: false },
	zoom: { use: false },
	default_series_type: "stackedbar"
};
chart.setup_options(options);
chart.render();