Skip to content

Commit

Permalink
feature(update) - updated chartJs configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@ESadouski
ESadouski committed Dec 7, 2016
1 parent 4ef797e commit 0187c33
Show file tree
Hide file tree
Showing 8 changed files with 222 additions and 149 deletions.
109 changes: 62 additions & 47 deletions src/app/pages/charts/chartJs/chartJs.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,81 @@
<div class="row">
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
<canvas id="pie" class="chart chart-pie"
chart-legend="true" chart-options="options" chart-data="data" chart-labels="labels" chart-click="changeData">
</canvas>
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
<div class="chartjs-canvas-holder-first-row">
<canvas id="pie" class="chart chart-pie"
chart-options="options" chart-data="data" chart-labels="labels"
chart-click="changeData">
</canvas>
</div>
</div>
</div>
</div>
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<div ba-panel ba-panel-title="Doughnut" ba-panel-class="with-scroll ">
<canvas id="doughnut" chart-options="options" class="chart chart-doughnut"
chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
</canvas>
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<div ba-panel ba-panel-title="Doughnut" ba-panel-class="with-scroll ">
<div class="chartjs-canvas-holder-first-row">
<canvas id="doughnut" chart-options="options" class="chart chart-doughnut"
chart-data="data" chart-labels="labels" chart-click="changeData">
</canvas>
</div>
</div>
</div>
</div>
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<div ba-panel ba-panel-title="Polar" ba-panel-class="with-scroll ">
<canvas id="polar-area" class="chart chart-polar-area"
chart-data="data" chart-options="polarOptions" chart-labels="labels" chart-legend="true" chart-click="changeData">
</canvas>
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<div ba-panel ba-panel-title="Polar" ba-panel-class="with-scroll ">
<div class="chartjs-canvas-holder-first-row">
<canvas id="polar-area" class="chart chart-polar-area"
chart-data="data" chart-options="options" chart-labels="labels"
chart-click="changeData">
</canvas>
</div>
</div>
</div>
</div>
</div>

<div class="row ">
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<div ba-panel ba-panel-title="Animated Radar" ba-panel-class="with-scroll col-eq-height">
<canvas id="waveLine" class="chart chart-radar" chart-data="data" chart-labels="labels"
chart-legend="false"></canvas>
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<div ba-panel ba-panel-title="Animated Radar" ba-panel-class="col-eq-height">
<div class="chartjs-canvas-holder-second-row">
<canvas id="waveLine" class="chart chart-radar" chart-data="[data]" chart-labels="labels"></canvas>
</div>

</div>
</div>
</div>
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<div ba-panel ba-panel-title="Animated Bars" ba-panel-class="with-scroll col-eq-height">
<canvas id="waveBars" class="chart chart-bar" chart-data="data" chart-labels="labels"
chart-legend="false"></canvas>
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<div ba-panel ba-panel-title="Animated Bars" ba-panel-class="col-eq-height">
<div class="chartjs-canvas-holder-second-row">
<canvas id="waveBars" class="chart chart-bar" chart-data="[data]" chart-labels="labels"></canvas>
</div>
</div>
</div>
</div>
</div>


<div class="row ">
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
<div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
<canvas id="radar" class="chart chart-radar"
chart-legend="false" chart-series="series" chart-data="data" chart-labels="labels"
chart-click="changeData">
</canvas>
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
<div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
<div class="chartjs-canvas-holder-third-row">
<canvas id="radar" class="chart chart-radar" chart-series="series" chart-data="data"
chart-labels="labels" chart-click="changeData">
</canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
<div ba-panel ba-panel-title="Line" ba-panel-class="with-scroll ">
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
chart-legend="false" chart-series="series" chart-click="changeData"></canvas>
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
<div ba-panel ba-panel-title="Line" ba-panel-class="with-scroll ">
<div class="chartjs-canvas-holder-third-row">
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="changeData"></canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
<div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
</canvas>
<div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
<div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
<div class="chartjs-canvas-holder-third-row">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData" chart-update="updateC">
</canvas>
</div>
</div>
</div>
</div>
</div>



92 changes: 62 additions & 30 deletions src/app/pages/charts/chartJs/chartJs.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,70 @@
* created on 12/16/15
*/
(function () {
'use strict';
'use strict';

angular.module('BlurAdmin.pages.charts.chartJs', [])
.config(routeConfig).config(chartJsConfig);
angular.module('BlurAdmin.pages.charts.chartJs', [])
.config(routeConfig).config(chartJsConfig);

/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('charts.chartJs', {
url: '/chartJs',
templateUrl: 'app/pages/charts/chartJs/chartJs.html',
title: 'Chart.js',
sidebarMeta: {
order: 200,
},
});
}
/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('charts.chartJs', {
url: '/chartJs',
templateUrl: 'app/pages/charts/chartJs/chartJs.html',
title: 'Chart.js',
sidebarMeta: {
order: 200
}
});
}

function chartJsConfig(ChartJsProvider, baConfigProvider) {
var layoutColors = baConfigProvider.colors;
// Configure all charts
ChartJsProvider.setOptions({
colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],
responsive: true,
scaleFontColor: layoutColors.defaultText,
scaleLineColor: layoutColors.border,
pointLabelFontColor: layoutColors.defaultText
});
// Configure all line charts
ChartJsProvider.setOptions('Line', {
datasetFill: false
});
}
function chartJsConfig(ChartJsProvider, baConfigProvider) {
var layoutColors = baConfigProvider.colors;
// Configure all charts
ChartJsProvider.setOptions({
chartColors: [
layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 2500
},
scale: {
gridLines: {
color: layoutColors.border
},
scaleLabel: {
fontColor: layoutColors.defaultText
},
ticks: {
fontColor: layoutColors.defaultText,
showLabelBackdrop: false
}
}
});
// Configure all line charts
ChartJsProvider.setOptions('Line', {
datasetFill: false
});
// Configure all radar charts
ChartJsProvider.setOptions('radar', {
scale: {
pointLabels: {
fontColor: layoutColors.defaultText
},
ticks: {
maxTicksLimit: 5,
display: false
}
}
});
// Configure all bar charts
ChartJsProvider.setOptions('bar', {
tooltips: {
enabled: false
}
});
}

})();
21 changes: 14 additions & 7 deletions src/app/pages/charts/chartJs/chartJs1DCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,24 @@
.controller('chartJs1DCtrl', chartJs1DCtrl);

/** @ngInject */
function chartJs1DCtrl($scope) {
function chartJs1DCtrl($scope, baConfig) {
var layoutColors = baConfig.colors;

$scope.labels =["Sleeping", "Designing", "Coding", "Cycling"];
$scope.data = [20, 40, 5, 35];
$scope.options = {
segmentShowStroke : false
};

$scope.polarOptions = {
scaleShowLabelBackdrop : false,
segmentShowStroke : false
elements: {
arc: {
borderWidth: 0
}
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: layoutColors.defaultText
}
}
};

$scope.changeData = function () {
Expand Down
6 changes: 3 additions & 3 deletions src/app/pages/charts/chartJs/chartJs2DCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@

/** @ngInject */
function chartJs2DCtrl($scope) {
$scope.labels =["May", "June", "Jule", "August", "September", "October", "November"];
$scope.labels =["May", "Jun", "Jul", "Aug", "Sep"];
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 88, 27, 45]
[65, 59, 90, 81, 56],
[28, 48, 40, 19, 88]
];
$scope.series = ['Product A', 'Product B'];

Expand Down
16 changes: 11 additions & 5 deletions src/app/pages/charts/chartJs/chartJsWaveCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,20 @@

/** @ngInject */
function chartJsWaveCtrl($scope, $interval, stopableInterval) {
$scope.labels =["April", "May", "June", "Jule", "August", "September", "October", "November", "December"];
$scope.data = [[1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){
$scope.labels =["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
$scope.data = [1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){
return Math.sin(e) * 25 +25;
})];
});

stopableInterval.start($interval, function(){
$scope.data[0].unshift($scope.data[0].pop());
}, 300)
var tempArray = [];
var lastElement = $scope.data[$scope.data.length-1];
for(var i = $scope.data.length-1; i > 0; i--){
tempArray[i] = $scope.data[i-1];
}
tempArray[0] = lastElement;
$scope.data = tempArray;
}, 400)
}

})();
Loading

0 comments on commit 0187c33

Please sign in to comment.