Show multiple labels with the same value

dlumbrer · Jun 6, 2018 · c69104e · c69104e
1 parent 82154f8
commit c69104e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/public/kbn_radar.html b/public/kbn_radar.html
@@ -1,4 +1,3 @@
 <div ng-controller="KbnRadarVisController" class="container kbn-radar" id="radar-chart_{{$id}}">
     <canvas id="radar_chart_{{$id}}" height="100%" width="100%"></canvas>
-</div>
-
+</div>
diff --git a/public/kbn_radar_controller.js b/public/kbn_radar_controller.js
@@ -163,7 +163,26 @@ module.controller('KbnRadarVisController', function ($scope, $element, $timeout,
               label: function (tooltipItem, data) {
                 var dataset = data['datasets'][tooltipItem['datasetIndex']];
                 var value = dataset['dataOrig'][tooltipItem['index']];
-                return dataset['label'] + ": " + value ;
+                var labelsWithSameValue = []
+                for (let i = 0; i < data['datasets'].length; i++) {
+                  const e = data['datasets'][i];
+                  var v = e['dataOrig'][tooltipItem['index']];
+                  if(v == value){
+                    labelsWithSameValue.push(e.label)
+                  }
+                }
+
+                //Draw good way
+                var str = "";
+                for (let index = 0; index < labelsWithSameValue.length; index++) {
+                  const element = labelsWithSameValue[index];
+                  if(index == labelsWithSameValue.length-1){
+                    str += element;
+                    continue
+                  }
+                  str += element + ", " 
+                }
+                return str + ": " + value ;
               },
               afterLabel: function (tooltipItem, data) {
                 var dataset = data['datasets'][tooltipItem['datasetIndex']];
@@ -176,7 +195,7 @@ module.controller('KbnRadarVisController', function ($scope, $element, $timeout,
             titleFontColor: '#FFF',
             bodyFontColor: '#FFF',
             bodyFontSize: 14,
-            displayColors: true
+            displayColors: false
           }
         };
       }else{
@@ -190,9 +209,49 @@ module.controller('KbnRadarVisController', function ($scope, $element, $timeout,
               min: 0
             },
           },
+          tooltips: {
+            callbacks: {
+              label: function (tooltipItem, data) {
+                var dataset = data['datasets'][tooltipItem['datasetIndex']];
+                var value = dataset['data'][tooltipItem['index']];
+                var labelsWithSameValue = []
+                for (let i = 0; i < data['datasets'].length; i++) {
+                  const e = data['datasets'][i];
+                  var v = e['data'][tooltipItem['index']];
+                  if(v == value){
+                    labelsWithSameValue.push(e.label)
+                  }
+                }
+
+                //Draw good way
+                var str = "";
+                for (let index = 0; index < labelsWithSameValue.length; index++) {
+                  const element = labelsWithSameValue[index];
+                  if(index == labelsWithSameValue.length-1){
+                    str += element;
+                    continue
+                  }
+                  str += element + ", " 
+                }
+                return str + ": " + value ;
+              }
+            },
+            backgroundColor: '#000',
+            titleFontSize: 16,
+            titleFontColor: '#FFF',
+            bodyFontColor: '#FFF',
+            bodyFontSize: 14,
+            displayColors: false
+          }
         };
       }
 
+      var original = Chart.defaults.global.legend.onClick;
+      Chartjs.defaults.global.legend.onClick = function(e, legendItem) {
+        console.log(e, legendItem);
+        original.call(this, e, legendItem);
+      };
+
       $scope.radarchart = new Chartjs(ctx, {
         data: dataComplete,
         type: 'radar',