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(); |