Uzair
Posts: 1
Joined: Thu Jul 07, 2022 11:23 am

Update Sunburst chart onchange

Hi, I want to update the sunburst chart value when the dropdown change.

but currently, I am having errors.


here is my code URL.
https://jsfiddle.net/7nceu5vx/

Code: Select all

var data =[{
      id: '0.0',
      parent: '',
    	name: 'KSE 100',
      volume : 3232322,
      chg : 2.9,
      netChg: 1.3,
      index : 32819,
      count : 500,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#003a04'], // start
        [1, '#056b11'] // end
    ]
},
    }, {
      id: '1.0',
      parent: '0.0',
      name: 'Automobiles',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count : 20,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#008709'], // start
        [1, '#26D701']
    ]
},
    }, {
      parent: '1.0',
      name: 'BKTI',
      value: 1,
    }, {
      parent: '1.0',
      name: 'TATA',
      value: 1,
    }, {
      parent: '1.0',
      name: 'Tesla',
      value: 1,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#7e0505'], // start
        [1, '#bd0505'] // end
    ]
},
    }, {
      id: '2.0',
      name: 'Commerical Bank',
      parent: '0.0',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count : 30,
      color: {
    linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
    stops: [
        [0, '#850b0b'], // start
        [1, '#E20000'] // end
    ]
}
    }, {
      parent: '2.0',
      name: 'HBL',
      value: 1,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#00AB08'], // start
        [1, '#26D701'] // end
    ]
},
    }, {
      parent: '2.0',
      name: 'SC',
      value: 1
    }, {
      parent: '2.0',
      name: 'ABL',
      value: 1
    }, {
      id: '3.0',
      name: 'Cement',
      parent: '0.0',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count: 210,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#008709'], // start
        [1, '#26D701'] // end
    ]
}
    }, {
      parent: '3.0',
      name: 'OGDC',
      value: 1,
      chg : 22.1,
      netChg : 2.3,
      vol: 2121332,
      price : 32.2,
    }, {
      parent: '3.0',
      name: 'Lucky',
      value: 1,
      chg : 22.1,
      netChg : 2.3,
      vol: 2121332,
      price : 32.2,
    }, {
      parent: '3.0',
      name: 'Thatta',
      value: 1,
      chg : 22.1,
      netChg : 2.3,
      vol: 2121332,
      price : 32.2,
    }];
var data2 = 
[{
      id: '0.0',
      parent: '',
    	name: 'KSE ALL',
      volume : 3232322,
      chg : 2.9,
      netChg: 1.3,
      index : 32819,
      count : 500,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#003a04'], // start
        [1, '#056b11'] // end
    ]
},
    }, {
      id: '1.0',
      parent: '0.0',
      name: 'Chemical',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count : 20,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#008709'], // start
        [1, '#26D701']
    ]
},
    }, {
      parent: '1.0',
      name: 'BKTI',
      value: 1,
    }, {
      parent: '1.0',
      name: 'TATA',
      value: 1,
    }, {
      parent: '1.0',
      name: 'Tesla',
      value: 1,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#7e0505'], // start
        [1, '#bd0505'] // end
    ]
},
    }, {
      id: '2.0',
      name: 'Technology',
      parent: '0.0',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count : 30,
      color: {
    linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
    stops: [
        [0, '#850b0b'], // start
        [1, '#E20000'] // end
    ]
}
    }, {
      parent: '2.0',
      name: 'HBL',
      value: 1,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#00AB08'], // start
        [1, '#26D701'] // end
    ]
},
    }, {
      parent: '2.0',
      name: 'SC',
      value: 1
    }, {
      parent: '2.0',
      name: 'ABL',
      value: 1
    }, {
      id: '3.0',
      name: 'Fertilizer',
      parent: '0.0',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count: 210,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#008709'], // start
        [1, '#26D701'] // end
    ]
}
    }, {
      parent: '3.0',
      name: 'OGDC',
      value: 1,
      chg : 22.1,
      netChg : 2.3,
      vol: 2121332,
      price : 32.2,
    }, {
      parent: '3.0',
      name: 'Lucky',
      value: 1,
      chg : 22.1,
      netChg : 2.3,
      vol: 2121332,
      price : 32.2,
    }, {
      parent: '3.0',
      name: 'Thatta',
      value: 1,
      chg : 22.1,
      netChg : 2.3,
      vol: 2121332,
      price : 32.2,
    }];




function numberChange(val){
		console.log(val);
		if(parseInt(val) < 0 ){
    		return 'red';
    }
    else {
    	return 'green';
    }
    }


  $(document).ready(function(){
    
    
});

Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  }
});


var options  =  {

  chart: {
    height: '70%',
   // type: 'sunburst'
   renderTo: 'container'

  },

  title: {
    text: 'World population 2017'
  },
  subtitle: {
    text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
  },
  plotOptions: {
    sunburst: {}
  },
  series: [{
    type: "sunburst",
    name: 'Root',
    data: data,
    point:{
      events:{
        click: function (event) {
          alert(this.name);
        }
      }
    },
    allowDrillToNode: true,
    cursor: 'pointer',
    dataLabels: {
    
      /**
       * A custom formatter that returns the name only if the inner arc
       * is longer than a certain pixel size, so the shape has place for
       * the label.
       */
          style: {
            fontSize: "12px",
            //color: "#515151",           
            fontWeight: 'normal !important',
            fontFamily: "'Open Sans', sans-serif",
            textOutline : 0,
            color: '#fff'
          },
    },
    levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
               filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                },
                
            style: {
            fontSize: "12px",
            //color: "#515151",           
            fontWeight: 'normal !important',
            fontFamily: "'Open Sans', sans-serif",
						textShadow: false ,
            backgroundColor: 'rgba(255, 255, 255, 1)',
          	},
         	},
        },{
      level: 2,
      dataLabels: {
        rotationMode: 'parallel'
      }
    }, {
      level: 3,
      colorVariation: {
        key: 'brightness',
        to: -0.4 //Tells the gradation extent
      }
    }]
  }],
  tooltip: {
  	shared: true,
    useHTML: true,
   valueDecimals: 2,
   style : {
    fontSize : 12 + 'px'
   },
   //headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
    
		formatter: function () {
					console.log(this);
						if (this.point.node.level == 3) {
            return  '<table class"comments_buble"><tr><th colspan="2">'+this.point.options.name+'</th></tr><tr><td>Price </td>' + '<td style="text-align: right"><b>'+this.point.options.price +' PKR</b></td></tr>'+ '<tr><td>Chg.  </td>' + '<td style="text-align: right;color:green;"><b>'+ this.point.options.chg +'</b></td></tr>'+
                  '<tr><td>% Chg.  </td>' + '<td style="text-align: right;color:green"><b>'+ this.point.options.netChg +'</b></td></tr>'+
                  '<tr><td>Volume  </td>' + '<td style="text-align: right;"><b>'+ this.point.options.vol +'</b></td></tr></table>'  ;
    } 
    else if(this.point.node.level == 2) {
    return  '<table><tr><th colspan="2">'+this.point.options.name+'</th></tr><tr><td>Index </td>' + '<td style="text-align: right"><b>'+this.point.options.index +'</b></td></tr>'+ '<tr><td>Chg.  </td>' + '<td style="text-align: right;color:green;"><b>'+ this.point.options.chg +'</b></td></tr>'+
                  '<tr><td>% Chg.  </td>' + '<td style="text-align: right;color:green"><b>'+ this.point.options.netChg +'</b></td></tr>'+
                  '<tr><td>Companies  </td>' + '<td style="text-align: right;"><b>'+ this.point.options.count +'</b></td></tr></table>' ;
    }
     else {
     return  '<table><tr><th colspan="2">'+this.point.options.name+'</th></tr><tr><td>Index </td>' + '<td style="text-align: right"><b>'+this.point.options.index +'</b></td></tr>'+ '<tr><td>Chg.  </td>' + '<td style="text-align: right;color:green;"><b>'+ this.point.options.chg +'</b></td></tr>'+
                  '<tr><td>% Chg.  </td>' + '<td style="text-align: right;color:green"><b>'+ this.point.options.netChg +'</b></td></tr>'+
                  '<tr><td>Volume  </td>' + '<td style="text-align: right;"><b>'+ this.point.options.volume +'</b></td></tr>'+
                  '<tr><td>Companies  </td>' + '<td style="text-align: right;"><b>'+ this.point.options.count +'</b></td></tr></table>' ;
     }
  },
  
  }
};
var chart = new Highcharts.Chart(options);


$('#type_').on('change',function(){
      alert(this.value);
   //   console.log(chart.series[0])
      //chart.destroy();
     // drawChart(data2);

  //     chart.series[0].update({
  //       data: data2
  // })
     // var chart = new Highcharts.Chart(options);
      chart.series[0].setData(data2);
      //chartBench.redraw();
      chart.redraw()
    });
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Update Sunburst chart onchange

Hello Uzair!
Welcome to our forum and thanks for contacting us with your question!

The issue relates to the key in your point objects: index. This is a reserved key in Highcharts Core, you read more about this in the first link of documentation below. To get around to this problem you have two ways. You can comment (or delete, rename) this property in objects and everything will work with your code. Or as a second approach you can use an optional parameter in setData method, which is called updatePoints - when this is set to true, points will be updated instead of replaced whenever possible.

One more suggestion, you don't have to use chart.redraw method after setData, because by default setData calls the redraw method.

Demos: https://jsfiddle.net/BlackLabel/ozu5620n/
https://jsfiddle.net/BlackLabel/pmn84whf/

API Reference: https://api.highcharts.com/class-refere ... oint#index
https://api.highcharts.com/class-refere ... es#setData

Let me know if you have any further questions!
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”