jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

chartJs: add colors and aminmation

pull/3/head
alex 2015-12-17 14:55:41 +03:00
parent 1cff1f2a1c
commit bca3ab5dbe
5 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/pages/charts/chartJs/chartJs.html
View File

@ -1,53 +1,66 @@
<div class="row">
<div class="col-md-6" ng-controller="chartJs2DCtrl">
<blur-panel title="Line" class-container="with-scroll">
<div class="row ">
<div class="col-md-6 " ng-controller="chartJs2DCtrl">
<blur-panel title="Line" class-container="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>
</blur-panel>
</div>
<div class="col-md-6" ng-controller="chartJs2DCtrl">
<blur-panel title="Bars" class-container="with-scroll">
<div class="col-md-6 " ng-controller="chartJs2DCtrl">
<blur-panel title="Bars" class-container="with-scroll ">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
</canvas>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-controller="chartJs1DCtrl">
<blur-panel title="Pie" class-container="with-scroll">
<div class="row ">
<div class="col-md-6 " ng-controller="chartJs1DCtrl">
<blur-panel title="Pie" class-container="with-scroll ">
<canvas id="pie" class="chart chart-pie"
chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
</canvas>
</blur-panel>
</div>
<div class="col-md-6" ng-controller="chartJs1DCtrl">
<blur-panel title="Doughnut" class-container="with-scroll">
<canvas id="doughnut" class="chart chart-doughnut"
<div class="col-md-6 " ng-controller="chartJs1DCtrl">
<blur-panel title="Doughnut" class-container="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>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-controller="chartJs1DCtrl">
<blur-panel title="Polar" class-container="with-scroll chart-panel">
<div class="row ">
<div class="col-md-6 " ng-controller="chartJs1DCtrl">
<blur-panel title="Polar" class-container="with-scroll ">
<canvas id="polar-area" class="chart chart-polar-area"
chart-data="data" chart-labels="labels" chart-legend="true" chart-click="changeData">
</canvas>
</blur-panel>
</div>
<div class="col-md-6" ng-controller="chartJs2DCtrl">
<blur-panel title="Radar" class-container="with-scroll chart-panel">
<div class="col-md-6 " ng-controller="chartJs2DCtrl">
<blur-panel title="Radar" class-container="with-scroll ">
<canvas id="radar" class="chart chart-radar"
chart-data="data" chart-labels="labels" chart-click="changeData">
chart-legend="true" chart-series="series" chart-data="data" chart-labels="labels"
chart-click="changeData">
</canvas>
</blur-panel>
</div>
</div>
<div class="row ">
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<blur-panel title="Animated Line" class-container="with-scroll col-eq-height">
<canvas id="waveLine" class="chart chart-radar" chart-data="data" chart-labels="labels"
chart-legend="false"></canvas>
</blur-panel>
</div>
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<blur-panel title="Animated Bars" class-container="with-scroll col-eq-height">
<canvas id="waveBars" class="chart chart-bar" chart-data="data" chart-labels="labels"
chart-legend="false"></canvas>
</blur-panel>
</div>
</div>

3
src/app/pages/charts/chartJs/chartJs1DCtrl.js
View File

@ -13,7 +13,8 @@
$scope.labels =["Sleeping", "Designing", "Coding", "Cycling", "Running"];
$scope.data = [20, 40, 5, 35, 10];
$scope.options = {
};
$scope.changeData = function () {
$scope.data = shuffle($scope.data);
};

23
src/app/pages/charts/chartJs/chartJsWaveCtrl.js Normal file
View File

@ -0,0 +1,23 @@
/**
* @author a.demeshko
* created on 12/16/15
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.chartJs')
.controller('chartJsWaveCtrl', chartJsWaveCtrl);
/** @ngInject */
function chartJsWaveCtrl($scope, $interval) {
$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){
return Math.sin(e) * 25 +25;
})];
$interval(function(){
$scope.data[0].unshift($scope.data[0].pop());
}, 300)
}
})();

4
src/app/theme/chartJsConfig.js
View File

@ -9,10 +9,10 @@
.config(chartJsConfig);
/** @ngInject */
function chartJsConfig(ChartJsProvider) {
function chartJsConfig(ChartJsProvider, layoutColors) {
// Configure all charts
ChartJsProvider.setOptions({
colours: ['#FF5252', '#FF8A80'],
colours: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info],
responsive: true
});
// Configure all line charts

2
src/sass/theme/dashboard/_trafficChart.scss
View File

@ -33,7 +33,7 @@
width: 160px;
}
ul.doughnut-legend {
.traffic-legend ul.doughnut-legend {
li {
list-style: none;
font-size: 12px;