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 @@
-
+
+
+
+
+
+
+
+
@@ -629,6 +647,26 @@
+
+
+
+
@@ -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
+ })
})