diff --git a/pages/charts/chartjs.html b/pages/charts/chartjs.html index c3c15987a..c7e5d1a6a 100644 --- a/pages/charts/chartjs.html +++ b/pages/charts/chartjs.html @@ -580,7 +580,25 @@
- + +
+ + + + + +
+
+

Pie Chart

+ +
+ + +
+
+
+
@@ -629,6 +647,26 @@ + +
+
+

Stacked Bar Chart

+ +
+ + +
+
+
+
+ +
+
+ +
+ + @@ -753,11 +791,11 @@ }) //------------- - //- PIE CHART - + //- DONUT CHART - //------------- // Get context with jQuery - using jQuery's .get() method. - var pieChartCanvas = $('#pieChart').get(0).getContext('2d') - var pieData = { + var donutChartCanvas = $('#donutChart').get(0).getContext('2d') + var donutData = { labels: [ 'Chrome', 'IE', @@ -773,16 +811,35 @@ } ] } + var donutOptions = { + maintainAspectRatio : false, + responsive : true, + } + //Create pie or douhnut chart + // You can switch between pie and douhnut using the method below. + var donutChart = new Chart(donutChartCanvas, { + type: 'doughnut', + data: donutData, + options: donutOptions + }) + + //------------- + //- PIE CHART - + //------------- + // Get context with jQuery - using jQuery's .get() method. + var pieChartCanvas = $('#pieChart').get(0).getContext('2d') + var pieData = donutData; var pieOptions = { + maintainAspectRatio : false, + responsive : true, } //Create pie or douhnut chart // You can switch between pie and douhnut using the method below. var pieChart = new Chart(pieChartCanvas, { - type: 'doughnut', + type: 'pie', data: pieData, options: pieOptions }) - // pieChart.Doughnut(PieData, pieOptions) //------------- //- BAR CHART - @@ -793,21 +850,43 @@ var temp1 = areaChartData.datasets[1] barChartData.datasets[0] = temp1 barChartData.datasets[1] = temp0 - // barChartData.datasets[1].backgroundColor = '#00a65a' - // barChartData.datasets[1].borderColor = '#00a65a' var barChartOptions = { responsive : true, - maintainAspectRatio : true + maintainAspectRatio : false, + datasetFill : false } - barChartOptions.datasetFill = false var barChart = new Chart(barChartCanvas, { type: 'bar', data: barChartData, options: barChartOptions }) - // barChart.Bar(barChartData, barChartOptions) + + //--------------------- + //- STACKED BAR CHART - + //--------------------- + var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d') + var stackedBarChartData = jQuery.extend(true, {}, barChartData) + + var stackedBarChartOptions = { + responsive : true, + maintainAspectRatio : false, + scales: { + xAxes: [{ + stacked: true, + }], + yAxes: [{ + stacked: true + }] + } + } + + var stackedBarChart = new Chart(stackedBarChartCanvas, { + type: 'bar', + data: stackedBarChartData, + options: stackedBarChartOptions + }) })