Created
May 23, 2017 05:35
-
-
Save nirleka/f51be7970debcfe68211b5fae6f29d69 to your computer and use it in GitHub Desktop.
Angular Chartjs color example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container-box"> | |
<canvas id="base" class="chart-bar" | |
chart-data="data" | |
chart-labels="labels" | |
chart-colors="colors" | |
chart-dataset-override="datasetOverride" | |
chart-options="options" | |
height="300" width="500"> | |
</canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
/** | |
* @ngdoc directive | |
* @name dashboardWkApp.directive:barchar100p | |
* @description | |
* # barchar100p | |
*/ | |
angular.module('dashboardWk') | |
.directive('barchart100p',[ "APP_CONST", "$rootScope", function ( APP_CONST, $rootScope ) { | |
return { | |
templateUrl: APP_CONST.dTemplate + 'barchart100p.html', | |
restrict: 'E', | |
scope: { | |
info: '=?' | |
}, | |
controller: ['$scope', function ( $scope ) { | |
$scope.colors = []; | |
$scope.labels = $scope.info.data.label; | |
$scope.series = $scope.info.data.series; | |
$scope.data = $scope.info.data.value; | |
$scope.datasetOverride = []; | |
angular.forEach( $scope.info.data.datasets, function (v) { | |
if (!v.hexa) | |
v.hexa = $rootScope.getRandomColor(); | |
if ( v.hexa[0] !== '#') | |
v.hexa = '#' + v.hexa; | |
$scope.datasetOverride.push({ | |
label: v.label, | |
type: v.type, | |
fill: true, | |
backgroundColor: v.hexa, | |
borderColor: v.hexa, | |
fillColor: v.hexa, | |
strokeColor: v.hexa | |
}); | |
}); | |
$scope.options = { | |
responsive: true, | |
maintainAspectRatio: true, | |
legend: { | |
display: true, | |
position: 'bottom' | |
}, | |
scales: { | |
xAxes: [{ | |
stacked: true, | |
scaleLabel: { | |
display: true, | |
labelString: 'Tahun' | |
} | |
}], | |
yAxes: [{ | |
id: 'y-1', | |
stacked: true, | |
scaleLabel: { | |
display: true, | |
labelString: 'Realisasi biaya (%)' | |
} | |
}] | |
} | |
}; | |
}] | |
}; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container-box" style="height: 50vh"> | |
<canvas id="base" class="chart-bar" | |
chart-data="data" | |
chart-labels="labels" | |
chart-colors="colors" | |
chart-dataset-override="datasetOverride" | |
chart-options="options" | |
height="300" width="500"> | |
</canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
/** | |
* @ngdoc directive | |
* @name dashboardWkApp.directive:barchar100p | |
* @description | |
* # barchar100p | |
*/ | |
angular.module('dashboardWk') | |
.directive('doubleStackedChart',[ "APP_CONST", "$rootScope", function ( APP_CONST, $rootScope ) { | |
return { | |
templateUrl: APP_CONST.dTemplate + 'barchart100p.html', | |
restrict: 'E', | |
scope: { | |
info: '=?' | |
}, | |
controller: ['$scope', function ( $scope ) { | |
$scope.colors = []; | |
$scope.labels = $scope.info.data.label; | |
$scope.data = $scope.info.data.value; | |
$scope.datasetOverride = []; | |
angular.forEach( $scope.info.data.datasets, function (v) { | |
$scope.datasetOverride.push({ | |
yAxisID: 'y-1', | |
label: v.label, | |
stack: v.stack, | |
fill: true, | |
backgroundColor: "#" + v.hexa, | |
borderColor: "#" + v.hexa, | |
fillColor: "#" + v.hexa, | |
strokeColor: "#" + v.hexa | |
}); | |
}); | |
$scope.options = { | |
responsive: true, | |
fontSize: 8, | |
maintainAspectRatio: false, | |
legend: { | |
display: false, | |
position: "bottom" | |
}, | |
scales: { | |
xAxes: [{ | |
id: 'x-1', | |
stacked: true, | |
ticks: { | |
fontSize: 8 | |
}, | |
scaleLabel: { | |
display: false, | |
labelString: 'Tahun' | |
} | |
}], | |
yAxes: [{ | |
id: 'y-1', | |
stacked: true, | |
ticks: { | |
fontSize: 8 | |
}, | |
scaleLabel: { | |
display: true, | |
labelString: 'Realisasi biaya (%)' | |
} | |
}] | |
} | |
}; | |
$rootScope.$on("fullscreenEnabled", function (event, data) { | |
if ($scope.options.legend) { | |
$scope.options.legend.display = true; | |
$scope.options.fontSize = 12; | |
$scope.options.scales.xAxes[0].scaleLabel.display = true; | |
$scope.options.scales.xAxes[0].ticks.fontSize = 12; | |
} | |
}); | |
$rootScope.$on("fullscreenDisabled", function (event, data) { | |
if ($scope.options.legend) { | |
$scope.options.legend.display = false; | |
$scope.options.fontSize = 8; | |
$scope.options.scales.xAxes[0].scaleLabel.display = false; | |
$scope.options.scales.xAxes[0].ticks.fontSize = 8; | |
} | |
}); | |
}] | |
}; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container-mixed"> | |
<canvas id="base" class="chart-bar" | |
chart-data="data" | |
chart-labels="labels" | |
chart-colors="colors" | |
chart-dataset-override="datasetOverride" | |
chart-options="options" | |
height="150" width="269"> | |
</canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
/** | |
* @ngdoc directive | |
* @name dashboardWk.directive:mixedChart | |
* @description | |
* # mixedChart | |
*/ | |
angular.module('dashboardWk') | |
.directive('mixedChart', ["APP_CONST", function ( APP_CONST ) { | |
return { | |
templateUrl: APP_CONST.dTemplate + 'mixedchart.html', | |
restrict: 'E', | |
scope: { | |
info: '=?' | |
}, | |
controller: ['$rootScope', "$scope", function ( $rootScope, $scope ) { | |
$scope.labels = $scope.info.data.label; | |
$scope.data = $scope.info.data.value; | |
$scope.data.push( $scope.info.data.value2[0] ); | |
$scope.datasetOverride = []; | |
var dataset1 = [] | |
, dataset2; | |
angular.forEach( $scope.info.data.datasets, function (value, key) { | |
var color = $rootScope.getRgba($rootScope.getRandomColor()); | |
dataset1.push({ | |
yAxisID: 'y-1', | |
label: value.label, | |
type: value.type | |
}); | |
}); | |
var maxVal = 0; | |
angular.forEach( $scope.info.data.value2[0], function (value) { | |
if (value > maxVal) maxVal = value; | |
}); | |
angular.forEach( $scope.info.data.datasets2, function (value, key) { | |
var color = $rootScope.getRgba($rootScope.getRandomColor()); | |
dataset2 = { | |
yAxisID: 'y-2', | |
label: value.label, | |
type: value.type | |
}; | |
}); | |
$scope.datasetOverride = dataset1; | |
if ( dataset2 ) | |
$scope.datasetOverride.push( dataset2 ); | |
$scope.options = | |
{ | |
responsive: true, | |
maintainAspectRatio: false, | |
elements: { | |
line: { | |
fill: false, | |
tension: 0 | |
} | |
}, | |
scales:{ | |
xAxes: [{ | |
stacked: true, | |
scaleLabel: { | |
display: false, | |
labelString: 'Tahun' | |
} | |
}], | |
yAxes: [ | |
{ | |
id: 'y-1', | |
stacked: true, | |
scaleLabel: { | |
display: true, | |
labelString: $scope.info.data.labely1 | |
}, | |
ticks: { | |
max: 100 | |
} | |
}, | |
{ | |
id: 'y-2', | |
type: 'linear', | |
position: 'right', | |
scaleLabel: { | |
display: true, | |
labelString: $scope.info.data.labely2 | |
}, | |
ticks: { | |
max: maxVal, | |
min: 0 | |
} | |
} | |
] | |
}, | |
"legend": { | |
"display": false, | |
"position": "bottom", | |
"labels": { | |
"fontSize": 12, | |
generateLabels: function(chart) { | |
var data = chart.data; | |
return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) { | |
var fillStyle = (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]); | |
if (!dataset.label) fillStyle = Chart.helpers.color().alpha(0).rgbString(); | |
return { | |
text: dataset.label !== null ? dataset.label : '', | |
fillStyle: fillStyle, | |
hidden: !dataset.label, | |
lineCap: dataset.borderCapStyle, | |
lineDash: dataset.label !== null ? dataset.borderDash : undefined, | |
lineDashOffset: dataset.label !== null ? dataset.borderDashOffset : undefined, | |
lineJoin: dataset.label !== null ? dataset.borderJoinStyle : undefined, | |
lineWidth: dataset.label !== null ? dataset.borderWidth : 0, | |
strokeStyle: dataset.label !== null ? dataset.borderColor : undefined, | |
pointStyle: dataset.label !== null ? dataset.pointStyle : undefined, | |
datasetIndex: i | |
}; | |
}, this) : []; | |
} | |
} | |
}, | |
"tooltips": { | |
mode: 'label', | |
callbacks: { | |
labels: function(tooltipItem, data) { | |
return tooltipItem.yLabel; | |
} | |
} | |
} | |
}; | |
$rootScope.$on("fullscreenEnabled", function (event, data) { | |
if ($scope.options.legend) { | |
$scope.options.legend.display = true; | |
} | |
}); | |
$rootScope.$on("fullscreenDisabled", function (event, data) { | |
if ($scope.options.legend) { | |
$scope.options.legend.display = false; | |
} | |
}); | |
}] | |
}; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="pie-container"> | |
<canvas class="chart chart-pie" | |
chart-data="data" chart-labels="labels" chart-options="options" | |
chart-colors="color" | |
height="125" width="125"> | |
</canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
/** | |
* @ngdoc directive | |
* @name dashboardWk.directive:pieChart | |
* @description | |
* # pieChart | |
*/ | |
angular.module('dashboardWk') | |
.directive('pieChart', ["APP_CONST", function ( APP_CONST) { | |
return { | |
templateUrl: APP_CONST.dTemplate + 'piechart.html', | |
restrict: 'E', | |
scope: { | |
info: '=?' | |
}, | |
controller: ['$scope', function( $scope ) { | |
$scope.labels = $scope.info.data.label; | |
$scope.data = $scope.info.data.value; | |
$scope.color = [ '#fb6c6e', '#48b5af', '#a48bcd', '#67c2d7', '#fcc707' ]; | |
$scope.options = { | |
responsive: true, | |
maintainAspectRatio: false, | |
tooltipEvents: [], | |
showTooltips: true, | |
tooltipCaretSize: 0, | |
onAnimationComplete: function () { | |
this.showTooltip(this.segments, true); | |
}, | |
legend: { | |
"display": true, | |
"position": "bottom", | |
"fontSize": 8 | |
}, | |
tooltips: { | |
callbacks: { | |
label: function(tooltipItem, data) { | |
var allData = data.datasets[tooltipItem.datasetIndex].data; | |
var tooltipLabel = data.labels[tooltipItem.index]; | |
var tooltipData = allData[tooltipItem.index]; | |
var total = 0; | |
angular.forEach( allData, function (value, key) { | |
total += value; | |
}); | |
var tooltipPercentage = Math.round((tooltipData / total) * 100); | |
return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)'; | |
} | |
} | |
} | |
}; | |
}] | |
}; | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment