Forum Discussion
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
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:
However the end-user wants to go more like this:
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?
- harikm00703-18-2022Data 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
- HamzaJ03-18-2022Data Integration
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
- harikm00703-18-2022Data 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 }); });-Hari