cancel
Showing results for 
Search instead for 
Did you mean: 

Convert pie chart to semi-circle donut

harikm007
13 - Data Warehouse
13 - Data Warehouse

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

harikm007_0-1646895212649.png

 

 

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 10

HamzaJ
10 - ETL
10 - ETL

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
13 - Data Warehouse
13 - Data Warehouse

Hi @HamzaJ ,

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

harikm007_0-1647363459939.png

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

 

Thanks alot @harikm007 exactly what i was looking for

Hi @harikm007 ,

I dont know if it is possible or if you can help me out, however my end-user wants it a bit different. This is what I have thanks to you:

HamzaJ_2-1647598695227.png

However the end-user wants to go more like this:

HamzaJ_1-1647598666953.png

It needs to look more and more like a gauge, however sisense does not allow different values to make up the gauge. The norm is just a percentage of the total so the original addition I can still use. However adding a number that shows the total amount of time , is that possible?

 

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @HamzaJ ,

Just to clarify - the requirement is to display numbers (0, 36, 25 and 19.5) in chart? or something else? Also what is calculation of 19.5 and 25?

-Hari

Hi @harikm007 

I dont know what is possible, but if it is then I would like the following:

- Display 0 at the left side

- Display X at the right side. X is the sum of 4 out of 4 measures (GRZ, ELV, Algemeen,Restant)

- Display Y in the middle. Y is the sum of 3 out of 4 measures (GRZ, ELV , Algemeen)

- Display Z . Z is always at 80% of the chart . I was already able to do this with your previous script. If it is possible to add the '25' that would be great. '25' would be a calculation of 0.7 * X. Where X is the sum of 4 out of 4 measures (GRZ, ELV, Algemeen,Restant)

If this is possible, that would be amazing

 

 

 

harikm007
13 - Data Warehouse
13 - Data Warehouse

@HamzaJ Please check if below script works for you:

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 = 75 //Percentage value to display line
	
		sum = 0
		sum3 = 0
		$.each(args.widget.rawQueryResult.values, function(index, value){
			sum=sum + value[1]. data
			
			if(index < 3)
				sum3 = sum3 + value[1]. data
		})
		
		averagevalue = parseInt(sum * 0.7)
		
		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 * 1.2 * Math.cos(angle)) + point.shapeArgs.x,
			y = (radius * 1.2 * Math.sin(angle)) + point.shapeArgs.y;
		var x2 = (radius * 0.5 * Math.cos(angle)) + point.shapeArgs.x,
			y2 = (radius * 0.5 * Math.sin(angle)) + point.shapeArgs.y;

		chart.renderer.path({
			'stroke': '#4ead2f', //Color of line
			'stroke-width': 3,
			zIndex: 3,
			'd': ['M', x2 + dx, y2 + dy, 'L', x + dx, y + dy]
		}).add();
	
		var text = chart.renderer.text(
			  'Norm <br> '  +averagevalue,
			  x + dx+20, y + dy - 15
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });


		 var text = chart.renderer.text(
			  '<b>0</b>',
			  (radius * 0.9 * Math.cos(3.0)) + point.shapeArgs.x-10, //Change 10 to adjust position of value
			  (radius * 0.9 * Math.sin(3.0)) + point.shapeArgs.y
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });

		  var text = chart.renderer.text(
			  '<b>' + sum + '</b>',
			  (radius * 1 * Math.cos(0.01)) + point.shapeArgs.x+10, //Change 10 to adjust position of value
			  (radius * 1 * Math.sin(0.01)) + point.shapeArgs.y+35 //Change 35 to adjust position of value
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });
	
		  var text = chart.renderer.text(
			  '<b>' + sum3 + '</b>',
			  point.shapeArgs.x+10, 
			  point.shapeArgs.y 
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });
});

 

harikm007_0-1647622063601.png

 

-Hari

 

Thanks @harikm007 This is what I am looking for. However the script does not work on my side. Im getting an error:

main.b134dde571557879c6e7.js:2  - TypeError: Cannot read properties of undefined (reading 'data')
    at Object.eval (eval at createWidgetExtension (https://ysis-inzicht.nl/js/app-main.js?g=c86e738f72cbed895382305b8e621c21:382:149496), <anonymous>:19:23)
    at Function.each (https://ysis-inzicht.nl/js/common.js?g=c86e738f72cbed895382305b8e621c21:40:2959)
    at eval (eval at createWidgetExtension (https://ysis-inzicht.nl/js/app-main.js?g=c86e738f72cbed895382305b8e621c21:382:149496), <anonymous>:18:5)
    at c.<anonymous> (https://ysis-inzicht.nl/js/common.js?g=c86e738f72cbed895382305b8e621c21:132:194160)
    at Array.forEach (<anonymous>)
    at c.trigger (https://ysis-inzicht.nl/js/common.js?g=c86e738f72cbed895382305b8e621c21:132:194134)
    at i.value (https://ysis-inzicht.nl/js/app-main.js?g=c86e738f72cbed895382305b8e621c21:382:182181)
    at https://ysis-inzicht.nl/js/app-main.js?g=c86e738f72cbed895382305b8e621c21:382:183758
    at <anonymous>

Do I need to rename the fields? Is it maybe because I do not use a breakdown in the piechart? All categories in the pie chart are individual measures:

HamzaJ_0-1647624176472.png

 

harikm007
13 - Data Warehouse
13 - Data Warehouse

@HamzaJ  I'm able to reproduce the issue when I created pie chart using individual measures. Here is the updated script:

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 = 75 //Percentage value to display line

		sum = 0
		sum3 = 0
		$.each(args.widget.rawQueryResult.values, function(index, value){
			sum=sum + value.data
			
			if(index < 3)
				sum3 = sum3 + value.data
		})

		averagevalue = parseInt(sum * 0.7)
		
		chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
		console.log(w)
		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 * 1.2 * Math.cos(angle)) + point.shapeArgs.x,
			y = (radius * 1.2 * Math.sin(angle)) + point.shapeArgs.y;
		var x2 = (radius * 0.5 * Math.cos(angle)) + point.shapeArgs.x,
			y2 = (radius * 0.5 * Math.sin(angle)) + point.shapeArgs.y;

		chart.renderer.path({
			'stroke': '#4ead2f', //Color of line
			'stroke-width': 3,
			zIndex: 3,
			'd': ['M', x2 + dx, y2 + dy, 'L', x + dx, y + dy]
		}).add();
	
		var text = chart.renderer.text(
			  'Norm <br> '  +averagevalue,
			  x + dx+20, y + dy - 15
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });


		 var text = chart.renderer.text(
			  '<b>0</b>',
			  (radius * 0.9 * Math.cos(3.0)) + point.shapeArgs.x-10, //Change 10 to adjust position of value
			  (radius * 0.9 * Math.sin(3.0)) + point.shapeArgs.y
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });

		  var text = chart.renderer.text(
			  '<b>' + sum + '</b>',
			  (radius * 1 * Math.cos(0.01)) + point.shapeArgs.x+10, //Change 10 to adjust position of value
			  (radius * 1 * Math.sin(0.01)) + point.shapeArgs.y+35 //Change 35 to adjust position of value
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });
	
		  var text = chart.renderer.text(
			  '<b>' + sum3 + '</b>',
			  point.shapeArgs.x+10, 
			  point.shapeArgs.y 
			).attr({
			  zIndex: 5
			}).add(),
			box = text.getBBox();
		  text.attr({
			dx: -box.width / 2
		  });
});

-Hari

Amazing! Thanks a million @harikm007 

HamzaJ_0-1647641856889.png