Simple Examples

/* Most Simple Example */
var dataset = [{ values:[ {x:"a",y:1}, {x:"b",y:2}, {x:"c",y:3} ] }];
var c1 = new ccd3.Chart("chart1",dataset);
c1.render();

/* Customize Chart pattern1 */
var dataset = [{ values:[ {x:"a",y:1}, {x:"b",y:2}, {x:"c",y:3} ] }];
var c2 = new ccd3.Chart("chart2",dataset);
var options = {
	default_series_type: "bar",
	title: {text:"Bar Chart"},
	xLabel: {text:"alphabet"},
	legend: {show: false}
};
c2.setup_options(options);
c2.render();

/* Customize Chart pattern2 */
var dataset = [{ values:[ {x:"a",y:1}, {x:"b",y:2}, {x:"c",y:3} ] }];
var c3 = new ccd3.Chart("chart3",dataset);
c3.default_series_type = "bar";
c3.title.text = "Bar Chart";
c3.xLabel.text = "alphabet";
c3.legend.show = false;
c3.render();

/* Updating Chart */
var dataset = [{ values:[ {x:"a",y:1}, {x:"b",y:2}, {x:"c",y:3} ] }];
var c4 = new ccd3.Chart("chart4",dataset);
c4.render();
dataset = [{ values:[ {x:"a",y:1}, {x:"b",y:2}, {x:"c",y:3}, {x:"d",y:4}, {x:"e",y:5} ] }];
c4.set_dataset(dataset); // update dataset
c4.render(); // re-render chart

c4 = null;
dataset = [
	{ values:[ {x:"a",y:1}, {x:"b",y:2}, {x:"c",y:3}, {x:"d",y:4}, {x:"e",y:5} ] },
	{ values:[ {x:"a",y:6}, {x:"b",y:7}, {x:"c",y:8}, {x:"d",y:9}, {x:"e",y:10} ] }
];
c4 = ccd3.instances["chart4"];
c4.set_dataset(dataset);
c4.render();