• Recent
    • Tags
    • Popular
    • Register
    • Login

    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 Mango 5 Documentation Website

    Pie Chart

    Dashboard Designer & Custom AngularJS Pages
    3
    6
    1.9k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      leoboeng
      last edited by

      Hi, I'm trying to make a pie chart based on a point but I can not do it. I did the following but it did not work:

      <ma-get-point-value point-xid="DP_698831" point="myPoint"></ma-get-point-value>
      <ma-pie-chart style="height: 300px; width: 600px" values="[ { value: myPoint, text: 'hot', color: '#ff9300' }, { value: 5, text: 'cold', color: '#942192' } ]"
      options="{depth3D:15,angle:30}"></ma-pie-chart>
      

      In the API it says that the value has to be number, someone knows to tell me how do I use the Point value instead of a number?

      1 Reply Last reply Reply Quote 0
      • CraigWebC
        CraigWeb
        last edited by CraigWeb

        @leoboeng said in Pie Chart:

        <ma-get-point-value point-xid="DP_698831" point="myPoint"></ma-get-point-value>
        <ma-pie-chart style="height: 300px; width: 600px" values="[ { value: myPoint, text: 'hot', color: '#ff9300' }, { value: 5, text: 'cold', color: '#942192' } ]"
        options="{depth3D:15,angle:30}"></ma-pie-chart>

        Hi Leoboeng

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

        Returns you an object. So you need to reference the myPoint.value to the pie chart.

        <ma-get-point-value point-xid="MBB_KNZ_4SML_LEV" point="myPoint"></ma-get-point-value>
        <ma-pie-chart style="height: 300px; width: 600px" values="[ { value: myPoint.value, text: 'hot', color: '#ff9300' }, { value: 5, text: 'cold', color: '#942192' } ]"
        options="{depth3D:15,angle:30}"></ma-pie-chart>
        
        

        I used one of my XiDs and it works. You could use .name or .deviceName in the pie chart text if you like as well.

        1 Reply Last reply Reply Quote 0
        • L
          leoboeng
          last edited by

          Thank you!!
          And how do I show the rendered value? I tried the following but it did not work:

              <ma-get-point-value point-xid="DP_530359" point="P_Ativa_A"></ma-get-point-value>
              <ma-get-point-value point-xid="DP_807622" point="P_Ativa_B"></ma-get-point-value>
              <ma-get-point-value point-xid="DP_515819" point="P_Ativa_C"></ma-get-point-value>
              <ma-pie-chart id="63759ca9-e465-45e3-80b8-89cda82627fe" style="height: 303px; width: 612px; position: absolute; left: 0px; top: 30px;" values="[ { value: P_Ativa_A.renderedValue, text: 'Fase A', color: 'red' }, { value: P_Ativa_B.renderedValue, text: 'Fase B', color: 'black' }, { value: P_Ativa_C.renderedValue, text: 'Fase C', color: 'white' } ]" options="{depth3D:15,angle:30}"></ma-pie-chart>
          </div>
          
          1 Reply Last reply Reply Quote 0
          • phildunlapP
            phildunlap
            last edited by

            Hi leoboeng,

            I tried what you have posted and it worked on my point that did not have any units or a suffix in the text renderer. However, when I added a unit like "Hz" to the point, the rendered value no longer worked.

            You could do something like this to slice off the units from the rendered value string, but it's not ideal:

            <ma-pie-chart id="63759ca9-e465-45e3-80b8-89cda82627fe" style="height: 303px; width: 612px; position: absolute; left: 0px; top: 30px;" values="[ { value: P_Ativa_A.renderedValue.slice(0, P_Ativa_C.renderedValue.indexOf(' ')), text: 'Fase A', color: 'red' }, { value: P_Ativa_B.renderedValue.slice(0, P_Ativa_C.renderedValue.indexOf(' ')), text: 'Fase B', color: 'black' }, { value: P_Ativa_C.renderedValue.slice(0, P_Ativa_C.renderedValue.indexOf(' ')), text: 'Fase C', color: 'white' } ]" options="{depth3D:15,angle:30}"></ma-pie-chart> 
            

            Why can't you use the value in the value field, and put part of the rendered value into the text or something? This is a numeric point, right? Aren't the value and the rendered value differing by the presence of units, or are you using a range rendered or scaling one unit to another or something? If so, you would need the output of the rendered value to be a number or to slice it down to being a number.

            L 1 Reply Last reply Reply Quote 0
            • CraigWebC
              CraigWeb
              last edited by CraigWeb

              It looks to me like you are displaying the active power of a 3 phase power monitor. In the Pie chart API it says :
              "This directive will display a pie chart for visualizing ratios." That is why the pie chart values do not correspond to the actual value and are displayed as a %. I would maybe look at using a different chart if you want to see actual KVA values. If I am wrong about the power monitor then just ignore me :)

              1 Reply Last reply Reply Quote 0
              • L
                leoboeng @phildunlap
                last edited by

                @phildunlap Yes it is a numerical point rendered with unity. They are power measurements, no conversions are made, the values are pulled directly from a ModBus TCP / IP meter.

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post