Highcharts Demo

author(s): Torstein Hønsi

by Korah Babu Varghese

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/defiant.js/2.2.1/defiant.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

var arrays=[{createdOn:'2019-02-09T04:50:13',revenueLoss:'$25',rootCause:'hello world'},{createdOn:'2019-05-09T04:50:13',revenueLoss:'$255',rootCause:'hello world 2'},{createdOn:'2019-03-09T04:50:13',revenueLoss:'$225',rootCause:'hello world 1'},{createdOn:'2019-03-09T04:50:13',revenueLoss:'$245',rootCause:'hello world 4'},
{createdOn:'2019-02-09T04:50:13',revenueLoss:'$25',rootCause:'hello world 5'},{createdOn:'2019-05-09T04:50:13',revenueLoss:'$255',rootCause:'hello world 2'},{createdOn:'2019-03-09T04:50:13',revenueLoss:'$225',rootCause:'hello world 6'},{createdOn:'2019-03-09T04:50:13',revenueLoss:'$245',rootCause:'hello world 4'}];
arrays.map(function(value, key) {
  return value.monthName=moment(value.createdOn.split('T')[0]).format('MMM');
});
/* document.write(JSON.stringify(arrays)); */
var monthArrayNames=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
   var result = arrays.reduce(function (r, a) {
        r[a.monthName] = r[a.monthName] || [];
        r[a.monthName].push(a);
        return r;
    }, Object.create(null));
console.log(result);
var finalSeries=[];
angular.forEach(result, function(item, index) {
var dynamiteArray=[];
angular.forEach(item, function(item2, index2) {
  for(var t=0;t<monthArrayNames.length;t++){
  if(t==moment().month(index).format("M")-1){
  dynamiteArray[t]=Number(item2.revenueLoss.replace('$',''));
  }
  else{
  dynamiteArray[t]=null;
  }
  }
  finalSeries.push({name:item2.rootCause,month:item2.monthName,data:dynamiteArray,showInLegend:true});
  });
});

function drillDownGds(monthName){
var finalSeries1=[];
  var xAxisGDSDateWise=[];
 angular.forEach(result,function(item,index){

  if(item==monthName){
   angular.forEach(item,function(item2,index2){
    xAxisGDSDateWise.push(item2.createdOn.split('T')[0]);
  finalSeries1.push({name:item2.rootCause,data:Number(item2.revenueLoss.replace('$',''))});
   });
  }
 });
 console.log(xAxisGDSDateWise);
 Highcharts.chart('container', {
  chart:...