1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var data1 = [{name: ..., value: ...}];
var options1 = {
	id: "#demo1", 
	width: 750, 
	height: 500, 
	margin: {
		top: 100, 
		left: 50, 
		right: 50, 
		bottom:100
	}, 
	data: data1, 
	bar_color: 'Pink'
};
var barChart = new BarChart(options1);
barChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var data1 = [{name: ..., value: ...}];
var options1 = {
	id: "#demo1", 
	width: 750, 
	height: 500, 
	margin: {
		top: 100, 
		left: 50, 
		right: 50, 
		bottom:100
	}, 
	data: data1, 
	grid_x_show: 'true', 
	grid_y_show: 'true'
};
var barChart = new BarChart(options1);
barChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var data1 = [{name: ..., value: ...}];
var options2 = {
	id: "#demo2", 
	width: 750, 
	height: 500, 
	margin: {
		top: 100, 
		left: 50, 
		right: 50, 
		bottom:100
	}, 
	data: data1, 
	bar_width: '20'
};
var barChart = new BarChart(options2);
barChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
var data2 = [];
var options4 = {
	id: "#demo4", 
	width: 750, 
	height: 500, 
	margin: {
	        top: 100, 
		left: 50, 
		right: 50, 
		bottom:100
	}, 
	data: data2, 
	x_axis_text: ' ',
	y_axis_text: 'Sale', 
	title_text: 'Line Chart'
};
var lineChart = new LineChart(options4);
lineChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var data3 = [
name:...,
times:[ {
    starting_time:...,
    ending_time:...} ]
];
var options5 = {
	id: "#demo5", 
	width: 750, 
	height: 300, 
	margin: {
	        top: 100, 
	        left: 100, 
	        right: 50, 
	        bottom:100
        }, 
	data: data3, 
	title_text: 'Timeline Chart', 
	x_axis_text: '', 
	row_separator: "steelblue",
	stack: true
};
var timelineChart = new TimeLine(options5);
timelineChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var data3 = [
name:...,
times:[ {
    starting_time:...,
    ending_time:...} ]
];
var options5 = {
	id: "#demo6", 
	width: 750, 
	height: 300, 
	margin: {
	        top: 100, 
	        left: 100, 
	        right: 50, 
	        bottom:100
        }, 
	data: data3, 
	title_text: 'Timeline Chart',
	stack: false
};
	color_range: category20b,
var timelineChart = new TimeLine(options5);
timelineChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var data3 = [
icon:...,
times:[ {
    starting_time:...,
    ending_time:...} ]
];
var options5 = {
	id: "#demo5", 
	width: 750, 
	height: 300, 
	margin: {
	        top: 100, 
	        left: 100, 
	        right: 50, 
	        bottom:100
        }, 
	data: data3, 
	title_text: 'Timeline Chart',
	stack: true,
	x_axis_text: ' ',
	color_range: ["red", "green", "blue"],
	background_color: gray,
	label_margin: 70
};
var timelineChart = new TimeLine(options5);
timelineChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var data4 = [
name:...,
value:...,
];
var options8 = {
	id: "#demo8", 
	width: 750, 
	height: 300, 
	margin: {
	        top: 100, 
	        left: 100, 
	        right: 50, 
	        bottom:100
        }, 
	data: data4, 
	title_text: 'Pie Chart',
	radius: '200',
	color_range: 'category20c'
};
var pieChart = new PieChart(options8);
pieChart.draw();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var data5 = [
name:...,
value:...,
];
var options9 = {
	id: "#demo9", 
	width: 750, 
	height: 300, 
	margin: {
	        top: 100, 
	        left: 100, 
	        right: 50, 
	        bottom:100
        }, 
	data: data5, 
	title_text: 'Donut Chart',
	title_position: 'bottom',
	title_size: '20px',
	outer_radius: '200',
	inner_radius: '100',
	color_range: 'category20'
};
var donutChart = new DonutChart(options9);
donutChart.draw();