chartJs: add colors and aminmation

src/app/pages/charts/chartJs/chartJs.html

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

src/app/pages/charts/chartJs/chartJs1DCtrl.js

@@ -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);
     };

src/app/pages/charts/chartJs/chartJsWaveCtrl.js

@@ -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)
+  }
+
+})();

src/app/theme/chartJsConfig.js

@@ -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

src/sass/theme/dashboard/_trafficChart.scss

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