Pie Chart

[Felicia Luong]

Hi,

Attached below for my script for creating a pie chart. I have 2 issues which I do not know how to do. Appreciate you can assist me.

1. How to show datapoint value into the pie chart? Currently, it can be included by hardcoding it under "text:" However, I will like this to link to datapoint value instead of hardcoding it. I had put it as "text : myPoint.value" or "text : {myPoint.value}", it doesn't work. You can find this in the script provided below under section where "allLabels".

2. How to show a value which is derived using formula into the pie chart? The formula is basically using the datapoint / 144 x 100. Refer to "text : 'Overall Efficiency 87% actual / target x 100' ".

Script:

<ma-get-point-value point-xid="CRWPOE_KP_C01" point="myPoint"></ma-get-point-value>

<p>The point name is "{{myPoint.name}}" and its value is {{myPoint.renderedValue}}.</p>

<ma-pie-chart style="height: 300px; width: 600px" values="[ { value: myPoint.value, text: 'Actual', color: '#942192' }, { value: 2-myPoint.value, text: 'Gap', color: '#ffffff' } ]"
options="{
titles: [{
text: '',
size: 15
}],

depth3D:0,
angle:0,
innerRadius: '60%',
allLabels: [{
y: '52%' ,
align: 'center' ,
size: 25,
bold : 'true',
text : '99',
color : '#555',

}, {
y : '44%' ,
align : 'center' ,
size : 12,
text : myPoint.value,
color : '#555'}, {
y : '20%' ,
align : 'center' ,
size : 25,
bold : 'true',
text : 'Overall Efficiency 87% actual / target x 100' ,
color : '#555'}]
}" ></ma-pie-chart>

Thanks.

Regards,
Felicia

[phildunlap]

Hi Felicia,

It doesn't look like there really is a direct way to achieve what you're asking. However, have you considered putting the pie chart inside a div with another div absolutely positioned into the place you'd like the label?

Something like...

<div>
  <ma-pie-chart style="position:relative;" ...></ma-pie-chart>
  <div id="pie-chart-center-label" style="position:relative; left: 75px; top: 55px;">Value: {{myPoint.value}}</div>
</div>