Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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


  • 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>