feature(update) - updated chartJs configuration

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

@@ -1,38 +1,49 @@
 <div class="row">
     <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-legend="true" chart-options="options" chart-data="data" chart-labels="labels" chart-click="changeData">
+                       chart-options="options" chart-data="data" chart-labels="labels"
+                        chart-click="changeData">
                 </canvas>
             </div>
         </div>
+    </div>
     <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-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
+                        chart-data="data" chart-labels="labels" chart-click="changeData">
                 </canvas>
             </div>
         </div>
+    </div>
     <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="polarOptions" chart-labels="labels" chart-legend="true" chart-click="changeData">
+                        chart-data="data" chart-options="options" chart-labels="labels"
+                        chart-click="changeData">
                 </canvas>
             </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">
+        <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 class="col-md-6" ng-controller="chartJsWaveCtrl">
-    <div ba-panel ba-panel-title="Animated Bars" ba-panel-class="with-scroll col-eq-height">
+        <div ba-panel ba-panel-title="Animated Bars" ba-panel-class="col-eq-height">
-      <canvas id="waveBars" class="chart chart-bar" chart-data="data" chart-labels="labels"
+            <div class="chartjs-canvas-holder-second-row">
-              chart-legend="false"></canvas>
+                <canvas id="waveBars" class="chart chart-bar" chart-data="[data]" chart-labels="labels"></canvas>
+            </div>
         </div>
     </div>
 </div>
@@ -41,26 +52,30 @@
 <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"
+            <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>
             </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 ">
+            <div class="chartjs-canvas-holder-third-row">
                 <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 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-data="data" chart-labels="labels" chart-series="series" chart-click="changeData" chart-update="updateC">
                 </canvas>
             </div>
         </div>
     </div>
-
+</div>
 
 

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

@@ -16,8 +16,8 @@
                 templateUrl: 'app/pages/charts/chartJs/chartJs.html',
                 title: 'Chart.js',
                 sidebarMeta: {
-            order: 200,
+                    order: 200
-          },
+                }
             });
     }
 
@@ -25,16 +25,48 @@
         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],
+            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,
-      scaleFontColor: layoutColors.defaultText,
+            maintainAspectRatio: false,
-      scaleLineColor: layoutColors.border,
+            animation: {
-      pointLabelFontColor: layoutColors.defaultText
+                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
+            }
+        });
     }
 
 })();

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

@@ -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
+      elements: {
-    };
+        arc: {
-
+          borderWidth: 0
-    $scope.polarOptions = {
+        }
-      scaleShowLabelBackdrop : false,
+      },
-      segmentShowStroke : false
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          fontColor: layoutColors.defaultText
+        }
+      }
     };
 
     $scope.changeData = function () {

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

@@ -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],
+      [65, 59, 90, 81, 56],
-      [28, 48, 40, 19, 88, 27, 45]
+      [28, 48, 40, 19, 88]
     ];
     $scope.series = ['Product A', 'Product B'];
 

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

@@ -10,14 +10,20 @@
 
   /** @ngInject */
   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;
-    })];
+    });
 
     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)
   }
 
 })();

src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js

@@ -13,50 +13,49 @@
 
       $scope.transparent = baConfig.theme.blur;
       var dashboardColors = baConfig.colors.dashboard;
-    $scope.doughnutData = [
+      $scope.doughnutData = {
+          labels: [
+              'Other',
+              'Search engines',
+              'Referral Traffic',
+              'Direct Traffic',
+              'Ad Campaigns'
+          ],
+          datasets: [
               {
-        value: 2000,
+                  data: [2000, 1500, 1000, 1200, 400],
-        color: dashboardColors.white,
+                  backgroundColor: [
-        highlight: colorHelper.shade(dashboardColors.white, 15),
+                      dashboardColors.white,
-        label: 'Other',
+                      dashboardColors.blueStone,
-        percentage: 87,
+                      dashboardColors.surfieGreen,
-        order: 1,
+                      dashboardColors.silverTree,
-      }, {
+                      dashboardColors.gossip
-        value: 1500,
+
-        color: dashboardColors.blueStone,
+                  ],
-        highlight: colorHelper.shade(dashboardColors.blueStone, 15),
+                  hoverBackgroundColor: [
-        label: 'Search engines',
+                      colorHelper.shade(dashboardColors.white, 15),
-        percentage: 22,
+                      colorHelper.shade(dashboardColors.blueStone, 15),
-        order: 4,
+                      colorHelper.shade(dashboardColors.surfieGreen, 15),
-      }, {
+                      colorHelper.shade(dashboardColors.silverTree, 15),
-        value: 1000,
+                      colorHelper.shade(dashboardColors.gossip, 15)
-        color: dashboardColors.surfieGreen,
+                  ],
-        highlight: colorHelper.shade(dashboardColors.surfieGreen, 15),
+                  percentage: [87, 22, 70, 38, 17]
-        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, {
+      window.myDoughnut = new Chart(ctx, {
-      segmentShowStroke: false,
+          type: 'doughnut',
-      percentageInnerCutout : 64,
+          data: $scope.doughnutData,
-      responsive: true
+          options: {
+              cutoutPercentage: 64,
+              responsive: true,
+              elements: {
+                  arc: {
+                      borderWidth: 0
+                  }
+              }
+          }
       });
   }
 })();

src/app/pages/dashboard/trafficChart/trafficChart.html

@@ -13,12 +13,14 @@
 
     <div class="channels-info">
         <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>
+                <p>{{::label}}<span class="channel-number">+{{data.percentage[i]}}%</span></p>
                 <div class="progress progress-sm channel-progress">
                     <div class="progress-bar " role="progressbar"
-               aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
+                         aria-valuenow="{{data.percentage[i]}}" aria-valuemin="0" aria-valuemax="100"
+                         style="width: {{item.percentage}}%">
                     </div>
                 </div>
             </div>

src/sass/app/_chartsPage.scss

@@ -163,3 +163,15 @@
 .chartist h5 {
   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;
+}