mirror of https://github.com/akveo/blur-admin
feature(update) - updated chartJs configuration
ESadouski
parent
4ef797e8cb
commit
0187c331ee
|
|
@ -1,66 +1,81 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||||
<div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
|
<div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
|
||||||
<canvas id="pie" class="chart chart-pie"
|
<div class="chartjs-canvas-holder-first-row">
|
||||||
chart-legend="true" chart-options="options" chart-data="data" chart-labels="labels" chart-click="changeData">
|
<canvas id="pie" class="chart chart-pie"
|
||||||
</canvas>
|
chart-options="options" chart-data="data" chart-labels="labels"
|
||||||
|
chart-click="changeData">
|
||||||
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
<div ba-panel ba-panel-title="Doughnut" ba-panel-class="with-scroll ">
|
||||||
<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"
|
<canvas id="doughnut" chart-options="options" class="chart chart-doughnut"
|
||||||
chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
|
chart-data="data" chart-labels="labels" chart-click="changeData">
|
||||||
</canvas>
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
<div ba-panel ba-panel-title="Polar" ba-panel-class="with-scroll ">
|
||||||
<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"
|
<canvas id="polar-area" class="chart chart-polar-area"
|
||||||
chart-data="data" chart-options="polarOptions" chart-labels="labels" chart-legend="true" chart-click="changeData">
|
chart-data="data" chart-options="options" chart-labels="labels"
|
||||||
</canvas>
|
chart-click="changeData">
|
||||||
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row ">
|
<div class="row ">
|
||||||
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
||||||
<div ba-panel ba-panel-title="Animated Radar" ba-panel-class="with-scroll col-eq-height">
|
<div ba-panel ba-panel-title="Animated Radar" ba-panel-class="col-eq-height">
|
||||||
<canvas id="waveLine" class="chart chart-radar" chart-data="data" chart-labels="labels"
|
<div class="chartjs-canvas-holder-second-row">
|
||||||
chart-legend="false"></canvas>
|
<canvas id="waveLine" class="chart chart-radar" chart-data="[data]" chart-labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
||||||
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
<div ba-panel ba-panel-title="Animated Bars" ba-panel-class="col-eq-height">
|
||||||
<div ba-panel ba-panel-title="Animated Bars" ba-panel-class="with-scroll col-eq-height">
|
<div class="chartjs-canvas-holder-second-row">
|
||||||
<canvas id="waveBars" class="chart chart-bar" chart-data="data" chart-labels="labels"
|
<canvas id="waveBars" class="chart chart-bar" chart-data="[data]" chart-labels="labels"></canvas>
|
||||||
chart-legend="false"></canvas>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="row ">
|
<div class="row ">
|
||||||
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
||||||
<div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
|
<div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
|
||||||
<canvas id="radar" class="chart chart-radar"
|
<div class="chartjs-canvas-holder-third-row">
|
||||||
chart-legend="false" chart-series="series" chart-data="data" chart-labels="labels"
|
<canvas id="radar" class="chart chart-radar" chart-series="series" chart-data="data"
|
||||||
chart-click="changeData">
|
chart-labels="labels" chart-click="changeData">
|
||||||
</canvas>
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
||||||
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
<div ba-panel ba-panel-title="Line" ba-panel-class="with-scroll ">
|
||||||
<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"
|
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
|
||||||
chart-legend="false" chart-series="series" chart-click="changeData"></canvas>
|
chart-series="series" chart-click="changeData"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
|
||||||
<div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
|
<div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
|
||||||
<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"
|
<canvas id="bar" class="chart chart-bar"
|
||||||
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
|
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData" chart-update="updateC">
|
||||||
</canvas>
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,38 +3,70 @@
|
||||||
* created on 12/16/15
|
* created on 12/16/15
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.pages.charts.chartJs', [])
|
angular.module('BlurAdmin.pages.charts.chartJs', [])
|
||||||
.config(routeConfig).config(chartJsConfig);
|
.config(routeConfig).config(chartJsConfig);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function routeConfig($stateProvider) {
|
function routeConfig($stateProvider) {
|
||||||
$stateProvider
|
$stateProvider
|
||||||
.state('charts.chartJs', {
|
.state('charts.chartJs', {
|
||||||
url: '/chartJs',
|
url: '/chartJs',
|
||||||
templateUrl: 'app/pages/charts/chartJs/chartJs.html',
|
templateUrl: 'app/pages/charts/chartJs/chartJs.html',
|
||||||
title: 'Chart.js',
|
title: 'Chart.js',
|
||||||
sidebarMeta: {
|
sidebarMeta: {
|
||||||
order: 200,
|
order: 200
|
||||||
},
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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', {
|
||||||
function chartJsConfig(ChartJsProvider, baConfigProvider) {
|
datasetFill: false
|
||||||
var layoutColors = baConfigProvider.colors;
|
});
|
||||||
// Configure all charts
|
// Configure all radar charts
|
||||||
ChartJsProvider.setOptions({
|
ChartJsProvider.setOptions('radar', {
|
||||||
colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],
|
scale: {
|
||||||
responsive: true,
|
pointLabels: {
|
||||||
scaleFontColor: layoutColors.defaultText,
|
fontColor: layoutColors.defaultText
|
||||||
scaleLineColor: layoutColors.border,
|
},
|
||||||
pointLabelFontColor: layoutColors.defaultText
|
ticks: {
|
||||||
});
|
maxTicksLimit: 5,
|
||||||
// Configure all line charts
|
display: false
|
||||||
ChartJsProvider.setOptions('Line', {
|
}
|
||||||
datasetFill: false
|
}
|
||||||
});
|
});
|
||||||
}
|
// Configure all bar charts
|
||||||
|
ChartJsProvider.setOptions('bar', {
|
||||||
|
tooltips: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
@ -9,17 +9,24 @@
|
||||||
.controller('chartJs1DCtrl', chartJs1DCtrl);
|
.controller('chartJs1DCtrl', chartJs1DCtrl);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function chartJs1DCtrl($scope) {
|
function chartJs1DCtrl($scope, baConfig) {
|
||||||
|
var layoutColors = baConfig.colors;
|
||||||
|
|
||||||
$scope.labels =["Sleeping", "Designing", "Coding", "Cycling"];
|
$scope.labels =["Sleeping", "Designing", "Coding", "Cycling"];
|
||||||
$scope.data = [20, 40, 5, 35];
|
$scope.data = [20, 40, 5, 35];
|
||||||
$scope.options = {
|
$scope.options = {
|
||||||
segmentShowStroke : false
|
elements: {
|
||||||
};
|
arc: {
|
||||||
|
borderWidth: 0
|
||||||
$scope.polarOptions = {
|
}
|
||||||
scaleShowLabelBackdrop : false,
|
},
|
||||||
segmentShowStroke : false
|
legend: {
|
||||||
|
display: true,
|
||||||
|
position: 'bottom',
|
||||||
|
labels: {
|
||||||
|
fontColor: layoutColors.defaultText
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.changeData = function () {
|
$scope.changeData = function () {
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,10 @@
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function chartJs2DCtrl($scope) {
|
function chartJs2DCtrl($scope) {
|
||||||
$scope.labels =["May", "June", "Jule", "August", "September", "October", "November"];
|
$scope.labels =["May", "Jun", "Jul", "Aug", "Sep"];
|
||||||
$scope.data = [
|
$scope.data = [
|
||||||
[65, 59, 90, 81, 56, 55, 40],
|
[65, 59, 90, 81, 56],
|
||||||
[28, 48, 40, 19, 88, 27, 45]
|
[28, 48, 40, 19, 88]
|
||||||
];
|
];
|
||||||
$scope.series = ['Product A', 'Product B'];
|
$scope.series = ['Product A', 'Product B'];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,20 @@
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function chartJsWaveCtrl($scope, $interval, stopableInterval) {
|
function chartJsWaveCtrl($scope, $interval, stopableInterval) {
|
||||||
$scope.labels =["April", "May", "June", "Jule", "August", "September", "October", "November", "December"];
|
$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){
|
$scope.data = [1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){
|
||||||
return Math.sin(e) * 25 +25;
|
return Math.sin(e) * 25 +25;
|
||||||
})];
|
});
|
||||||
|
|
||||||
stopableInterval.start($interval, function(){
|
stopableInterval.start($interval, function(){
|
||||||
$scope.data[0].unshift($scope.data[0].pop());
|
var tempArray = [];
|
||||||
}, 300)
|
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)
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
@ -11,52 +11,51 @@
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function TrafficChartCtrl($scope, baConfig, colorHelper) {
|
function TrafficChartCtrl($scope, baConfig, colorHelper) {
|
||||||
|
|
||||||
$scope.transparent = baConfig.theme.blur;
|
$scope.transparent = baConfig.theme.blur;
|
||||||
var dashboardColors = baConfig.colors.dashboard;
|
var dashboardColors = baConfig.colors.dashboard;
|
||||||
$scope.doughnutData = [
|
$scope.doughnutData = {
|
||||||
{
|
labels: [
|
||||||
value: 2000,
|
'Other',
|
||||||
color: dashboardColors.white,
|
'Search engines',
|
||||||
highlight: colorHelper.shade(dashboardColors.white, 15),
|
'Referral Traffic',
|
||||||
label: 'Other',
|
'Direct Traffic',
|
||||||
percentage: 87,
|
'Ad Campaigns'
|
||||||
order: 1,
|
],
|
||||||
}, {
|
datasets: [
|
||||||
value: 1500,
|
{
|
||||||
color: dashboardColors.blueStone,
|
data: [2000, 1500, 1000, 1200, 400],
|
||||||
highlight: colorHelper.shade(dashboardColors.blueStone, 15),
|
backgroundColor: [
|
||||||
label: 'Search engines',
|
dashboardColors.white,
|
||||||
percentage: 22,
|
dashboardColors.blueStone,
|
||||||
order: 4,
|
dashboardColors.surfieGreen,
|
||||||
}, {
|
dashboardColors.silverTree,
|
||||||
value: 1000,
|
dashboardColors.gossip
|
||||||
color: dashboardColors.surfieGreen,
|
|
||||||
highlight: colorHelper.shade(dashboardColors.surfieGreen, 15),
|
|
||||||
label: 'Referral Traffic',
|
|
||||||
percentage: 70,
|
|
||||||
order: 3,
|
|
||||||
}, {
|
|
||||||
value: 1200,
|
|
||||||
color: dashboardColors.silverTree,
|
|
||||||
highlight: colorHelper.shade(dashboardColors.silverTree, 15),
|
|
||||||
label: 'Direct Traffic',
|
|
||||||
percentage: 38,
|
|
||||||
order: 2,
|
|
||||||
}, {
|
|
||||||
value: 400,
|
|
||||||
color: dashboardColors.gossip,
|
|
||||||
highlight: colorHelper.shade(dashboardColors.gossip, 15),
|
|
||||||
label: 'Ad Campaigns',
|
|
||||||
percentage: 17,
|
|
||||||
order: 0,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
],
|
||||||
window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
|
hoverBackgroundColor: [
|
||||||
segmentShowStroke: false,
|
colorHelper.shade(dashboardColors.white, 15),
|
||||||
percentageInnerCutout : 64,
|
colorHelper.shade(dashboardColors.blueStone, 15),
|
||||||
responsive: true
|
colorHelper.shade(dashboardColors.surfieGreen, 15),
|
||||||
});
|
colorHelper.shade(dashboardColors.silverTree, 15),
|
||||||
|
colorHelper.shade(dashboardColors.gossip, 15)
|
||||||
|
],
|
||||||
|
percentage: [87, 22, 70, 38, 17]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||||
|
window.myDoughnut = new Chart(ctx, {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: $scope.doughnutData,
|
||||||
|
options: {
|
||||||
|
cutoutPercentage: 64,
|
||||||
|
responsive: true,
|
||||||
|
elements: {
|
||||||
|
arc: {
|
||||||
|
borderWidth: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
@ -11,18 +11,20 @@
|
||||||
<div class="traffic-legend"></div>
|
<div class="traffic-legend"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="channels-info">
|
<div class="channels-info">
|
||||||
<div>
|
<div>
|
||||||
<div class="channels-info-item" ng-repeat="item in doughnutData | orderBy:'order'">
|
<div class="channels-info-item" ng-repeat="label in doughnutData.labels"
|
||||||
<div class="legend-color" style="background-color: {{::item.color}}"></div>
|
ng-init="i = $index; data = doughnutData.datasets[0]">
|
||||||
<p>{{::item.label}}<span class="channel-number">+{{item.percentage}}%</span></p>
|
<div class="legend-color" style="background-color: {{::data.backgroundColor[i]}}"></div>
|
||||||
<div class="progress progress-sm channel-progress">
|
<p>{{::label}}<span class="channel-number">+{{data.percentage[i]}}%</span></p>
|
||||||
<div class="progress-bar " role="progressbar"
|
<div class="progress progress-sm channel-progress">
|
||||||
aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
|
<div class="progress-bar " role="progressbar"
|
||||||
</div>
|
aria-valuenow="{{data.percentage[i]}}" aria-valuemin="0" aria-valuemax="100"
|
||||||
|
style="width: {{item.percentage}}%">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -163,3 +163,15 @@
|
||||||
.chartist h5 {
|
.chartist h5 {
|
||||||
font-weight: $font-normal;
|
font-weight: $font-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chartjs-canvas-holder-first-row {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartjs-canvas-holder-second-row {
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartjs-canvas-holder-third-row {
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue