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 3.0 HTML dashboard unresponsive/taking up CPU utilisation


  • Hi,

    Just wondering if the behaviour I have is expected. I have created a custom dashboard using the pre-beta Mango 3.0, running on an i7 desktop with 16GB RAM, windows 10. The dashboard has a few ma-serial-chart and several ma-point-value, the code is shown below. All data-points used are updated once every second.

    Opening up the page on my desktop is mostly okay (apart from occasional unresponsiveness). The CPU usage can reach up to 10% from my Chrome browser. However, trying the page on a web device, such as my iPad becomes almost un-responsive. The page itself can take a minute to open, and any interaction, such as navigating to other pages has a huge delay. Despite this, the other few default dashboards (such as energy dashboard) don't have the same issue.

    I also tried to do the same on network connected Laptops, it isn't as bad as my iPad, however it is considerable more un-responsive than on the host PC.

    Is it because I'm having too many real-time plots? Or did I miss anything in the code. Cheers.

    Warm regards,
    Michael

    <div class="ma-designer-root" id="07d16112-2e95-40d7-b258-484be7e4806e" style="width: 1000px; height: 1000px; position: relative;" src="\user\img\network.svg" legend="DG Set-Point">
        
        
        <img id="819151ac-a817-4e65-badb-b5268105f658" style="position: absolute; left: 3px; top: 300px; width: 994px; height: 371px; text-align: center; color: rgb(255, 0, 0); z-index: 1;" src="\user\img\network.png">
        
        
        
        <ma-serial-chart id="67ca008b-ffd8-4eda-b295-6730bf3d547e" style="position: absolute; left: 0px; width: 500px; height: 300px; bottom: 0px; z-index: 1;" series1-values="bus_voltage_bsp_pu" default-type="line" legend="true" series1-title="BSP" series2-values="bus_voltage_a_pu" series2-title="A" series3-values="bus_voltage_b_pu" series3-title="B" series4-values="bus_voltage_c_pu" series4-title="C"></ma-serial-chart>
        <ma-serial-chart id="824fcec7-0b4f-4281-b0c6-bd059a2e0106" style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px;" series1-values="dg_set_point" series1-title="DG Set-Point" legend="true" default-type="line"></ma-serial-chart>
        <ma-serial-chart id="4aafc590-3296-456f-9cb6-23ebe9ff6e18" style="position: absolute; top: 0px; width: 500px; height: 300px; right: 0px;" default-type="line" series1-values="dg_output_mw" series1-title="Output (PU)" legend="true"></ma-serial-chart>
        <ma-serial-chart id="01f7c665-fb50-43eb-999c-38260a9f8b47" style="position: absolute; width: 500px; height: 300px; z-index: 1; right: 0px; bottom: 0px;" series1-values="counter_dg" default-type="line" legend="true" series1-title="DG" series2-values="counter_a" series2-title="A" series3-values="counter_b" series3-title="B" series4-values="counter_c" series4-title="C"></ma-serial-chart>
    
        
        
        <ma-point-value id="e4b0f23d-df39-4c04-9f3f-fe2d8a845fbb" style="position: absolute; left: 53px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_Grid_PU"></ma-point-value>
        <ma-point-value id="d8366dfa-845d-45e3-8a84-158f858f7ad1" style="position: absolute; left: 223px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_A_PU"></ma-point-value>
        <ma-point-value id="2289255b-66da-442f-af0d-f1347b253bf3" style="position: absolute; left: 483px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_B_PU"></ma-point-value>    
        <ma-point-value id="ed2d8fbc-e957-466a-a6e2-835356fff1bd" style="position: absolute; left: 733px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_C_PU"></ma-point-value>
        
        <div id="03e4d863-09aa-45ef-9b70-e06c6442401f" style="position: absolute; left: 475px; top: 580px; width: 200px; height: 30px; text-align: center; color: rgb(0, 29, 255); font-size: 24px; z-index: 1;">({{load_b_p_pu.renderedValue}} , {{load_b_q_pu.renderedValue}})</div>    
        <div id="1105dd79-c382-46f6-98bd-e92c50dd0c6b" style="position: absolute; left: 729px; top: 580px; width: 200px; height: 30px; text-align: center; color: rgb(0, 29, 255); font-size: 24px; line-height: normal; z-index: 1;">({{load_c_p_pu.renderedValue}} , {{load_c_q_pu.renderedValue}})</div>
        <div id="ee823109-4e12-48fb-95fe-bf32ed31bc30" style="position: absolute; left: 785px; top: 450px; width: 200px; height: 30px; text-align: center; color: rgb(255, 0, 0); font-size: 24px; line-height: normal; z-index: 1;">({{dg_p_pu.renderedValue}} , {{dg_q_pu.renderedValue}})</div>
        
        
        <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_Grid_PU" values="bus_voltage_bsp_pu" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_A_PU" values="bus_voltage_a_pu" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_B_PU" values="bus_voltage_b_pu" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_C_PU" values="bus_voltage_c_pu" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="DG_P_PU" values="dg_output_mw" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="DG_P_Available_Instant_PU" values="dg_available_mw" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="DG_Q_PU" values="dg_output_mvar" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="DG_SETPOINT_PU" values="dg_set_point" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="BUS_P_B_PU" values="load_b_mw" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="BUS_P_C_PU" values="load_c_mw" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_DG" values="counter_dg" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_A" values="counter_a" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_B" values="counter_b" rendered="false"></ma-point-values>
        <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_C" values="counter_c" rendered="false"></ma-point-values>
        
        
        
        
        <ma-get-point-value point-xid="BUS_P_B_PU" point="load_b_p_pu"></ma-get-point-value>
        <ma-get-point-value point-xid="BUS_Q_B_PU" point="load_b_q_pu"></ma-get-point-value>
        <ma-get-point-value point-xid="BUS_P_C_PU" point="load_c_p_pu"></ma-get-point-value>
        <ma-get-point-value point-xid="BUS_Q_C_PU" point="load_c_q_pu"></ma-get-point-value>
        <ma-get-point-value point-xid="DG_P_PU" point="dg_p_pu"></ma-get-point-value>
        <ma-get-point-value point-xid="DG_Q_PU" point="dg_q_pu"></ma-get-point-value>
    
        
        
    
    </div>
    

  • Hi @mliu18! Yikes, that's a lot of real time plots! Yeah you may experience some slowdowns on devices like iPads with that number of plots. I can suggest a few things -

    • Try using Chrome on the iPad
    • Use a time range of the last 5 minutes with a rollup instead of latest x values, If you use a single <ma-point-values> tag with an array of points (from a point query) you should see greatly improved performance

    Let me know if any of that requires further explanation.


  • Hi Jared,

    Thanks for the prompt response. Just wondering what do you mean by a single <ma-point-values> with an array of points? Cheers.

    Warm regards,
    Michael