Forum Discussion

harikm007's avatar
harikm007
Data Warehouse
03-10-2022

Convert pie chart to semi-circle donut

Here is a script to convert pie chart to semi circle donut

 

 

widget.on('processresult', function(se, ev){
    ev.result.plotOptions.pie.startAngle= -90,
    ev.result.plotOptions.pie.endAngle= 90,
    ev.result.plotOptions.pie.center= ['50%', '85%'],
    ev.result.plotOptions.pie.size= '110%'
    ev.result.plotOptions.pie.innerSize= '50%'
})

 

-Hari

 

10 Replies

Replies have been turned off for this discussion
  • HamzaJ's avatar
    HamzaJ
    Data Integration

    Hi harikm007 ,

    Thanks for sharing. Would it be possible (with a script) to add an arrow/line so this would look more like a guage? 

    • harikm007's avatar
      harikm007
      Data Warehouse

      Hi HamzaJ ,

      It is possible to draw line by finding the coordinates (I applied only basic style to the line):

      update the variable 'percent' with percentage at which line to be displayed

      widget.on('processresult', function(se, ev){
      	ev.result.plotOptions.pie.startAngle= -90,
          ev.result.plotOptions.pie.endAngle= 90,
          ev.result.plotOptions.pie.center= ['50%', '85%'],
          ev.result.plotOptions.pie.size= '110%'
          ev.result.plotOptions.pie.innerSize= '50%'
      })
      
      widget.on("ready", function(w, args){
      
      		var percent = 35 //Percentage value to display line
      		
      		chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
      		var point = chart.series[0].data[0];
      		var dx = chart.plotBox.x,
      			dy = chart.plotBox.y;
      		var radius = chart.series[0].data[0].shapeArgs.r;
      		var angle = ((100 - percent)*-3.142)/100
      		x = (radius * .9 * Math.cos(angle)) + point.shapeArgs.x,
      			y = (radius * .9 * Math.sin(angle)) + point.shapeArgs.y;
      		var x2 = (radius * 0.1 * Math.cos(angle)) + point.shapeArgs.x,
      			y2 = (radius * 0.1 * Math.sin(angle)) + point.shapeArgs.y;
      
      		chart.renderer.path({
      			'stroke': '#2c9147', //Color of line
      			'stroke-width': 3,
      			zIndex: 3,
      			'd': ['M', x2 + dx, y2 + dy, 'L', x + dx, y + dy]
      		}).add();	
      });

      -Hari