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.
md-card affecting Chart render??
-
I used some of Joels example page here https://forum.infiniteautomation.com/topic/2972/help-understanding-the-use-of-md-card/6 to help with a small dashboard and I like it alot however...
The md-card that contains the md-list seems to be causing the charts to disappear when changing changing the dates. When refreshing the browser the page loads all ok with chats working good. Only once changing the date will it cause them to disappear.
I think it can possibly be something to do with the layout I have??/ If I delete the card that contains the list completely It works as desired, but I really like the layout with a list of the values on the left there.
Any Suggestions??
Thanks In advance.
Cheers!
code is:
<div layout="column" layout-gt-sm="row" layout-align="space-between"> <md-card flex="" style="margin-top: 170px;"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex="" style="text-align: center; font-size: 26px"> <span>PH</span> </h2> </div> </md-toolbar> <ma-gauge-chart point-xid="Albany_Day_HospDP_6da534b8-0df3-4964-8541-e907f0defc5e" interval="2" start="0" band-1-end="6.8" band-2-end="7.8" band-3-end="14" band-1-color="yellow" band-2-color="green" band-3-color="red" style="width:100%; height:200px;" axis-thickness="5" axis-alpha="0.2" axis-label-font-size="14" value-offset="1" value-font-size="12" tick-interval="0.25" arrow-inner-radius="15" arrow-alpha="0.8"> </ma-gauge-chart></md-card> <md-card flex="" style="margin-top: 170px;"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex="" style="text-align: center; font-size: 26px"> <span>Pressure</span> </h2> </div> </md-toolbar> <ma-gauge-chart point-xid="Albany_Day_HospDP_33855fed-e4a9-4992-85b0-cd2e575b107b" interval="" start="0" end="1000" style="width:100%; height:200px;" axis-thickness="5" axis-alpha="0.2" axis-label-font-size="14" value-offset="1" value-font-size="12" tick-interval="25" arrow-inner-radius="15" arrow-alpha="0.8"> </ma-gauge-chart></md-card> <md-card flex="" style="margin-top: 170px;"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex="" style="text-align: center; font-size: 26px"> <span>Free Chlorine</span> </h2> </div> </md-toolbar> <ma-gauge-chart point-xid="Albany_Day_HospDP_a4d57eaa-c2ee-4cf6-bf1b-cd10494e8587" interval="0.1" start="0" end="1" style="width:100%; height:200px;" axis-thickness="5" axis-alpha="0.2" axis-label-font-size="14" value-offset="1" value-font-size="12" tick-interval="0.25" arrow-inner-radius="15" arrow-alpha="0.8"> </ma-gauge-chart></md-card> <md-card flex="" style="margin-top: 170px;"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex="" style="text-align: center; font-size: 26px"> <span>Turbidity</span> </h2> </div> </md-toolbar> <ma-gauge-chart point-xid="Albany_Day_HospDP_06539764-88ab-48f1-94b6-4883efdc0de1" interval="0.1" start="0" end="1" style="width:100%; height:200px;" axis-thickness="5" axis-alpha="0.2" axis-label-font-size="14" value-offset="1" value-font-size="12" tick-interval="0.25" arrow-inner-radius="15" arrow-alpha="0.8"> </ma-gauge-chart></md-card> </div> <!--Something wrong here??--> <div layout="column" layout-gt-sm="row"> <md-card flex="100" flex-gt-sm="25"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex=""> <span>Current Values</span> </h2> </div> </md-toolbar> <md-list class="md-dense"> <md-list-item layout=""> <h3>Cold Pressure</h3> </md-list-item> <md-list-item layout=""> Mains Incoming <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_1941e55d-4880-4f25-ab15-a9b46b5ebd2f" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> Pressure US Pre-Treat Filter <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_ad81b12e-81c2-4d6f-900d-fa09d4bbe847" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> Pressure DS Pre-Treat Filter <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_33855fed-e4a9-4992-85b0-cd2e575b107b" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-divider></md-divider> <md-list-item layout=""> <h3>Hot Water Pressure</h3> </md-list-item> <md-list-item layout=""> PHWS Supply Pressure <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_a62a0f6d-139a-4c22-b910-48f33c22a1d1" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> PHWS Outlet Pressure <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_2610803d-5b33-4bec-8cdf-25922890c54d" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> NPHWS Supply Pressure <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_cd3c6e38-18ad-4a74-9449-c593f39470b6" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> NPHWS Outlet Pressure <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_273356ac-0928-4c78-ade4-8c6d77c2aa28" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-divider></md-divider> <md-list-item layout=""> <h3>Temperature</h3> </md-list-item> <md-list-item layout=""> PHW Outlet Temperature <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_9b37bd5b-e8e6-4d25-829d-1e7ac3205082" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> PHW Return Temperature <span flex=""></span> <!-- PHW Return Pump 1 Status --> <ma-point-value point-xid="Albany_Day_HospDP_1363f426-8e2d-49c6-bd5c-7f1438758910" enable-popup="left" data-data-point-details="false"></ma-point-value> <!-- PHW Return Pump 2 Status --> <ma-point-value point-xid="Albany_Day_HospDP_946ea23b-257f-4337-8cf1-221123bc42b1" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> NPHW Outlet Temperature <span flex=""></span> <ma-point-value point-xid="Albany_Day_HospDP_054db421-f7a5-4890-a6d3-da70ca3101d6" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> <md-list-item layout=""> NPHW Return Temperature <span flex=""></span> <!-- NPHW Return Pump 1 Status --> <ma-point-value point-xid="Albany_Day_HospDP_7d6edee2-b2ae-4c55-8b1e-59bc42a15b99" enable-popup="left" data-data-point-details="false"></ma-point-value> <!-- NPHW Return Pump 2 Status --> <ma-point-value point-xid="Albany_Day_HospDP_c31f9a60-48eb-413e-8c50-456c9a59f25e" enable-popup="left" data-data-point-details="false"></ma-point-value> </md-list-item> </md-list> </md-card> <!--Something wrong here??--> <md-card flex="100" flex-gt-md="75"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex=""> <span>Charts</span> </h2> </div> </md-toolbar> <md-card-content layout="column"> <div layout="row" layout-xs="column"> <md-input-container flex> <label>Quick Dates</label> <ma-date-range-picker from="from" to="to" preset="LAST_1_WEEKS" update-interval="1 minutes"></ma-date-range-picker> </md-input-container> <md-input-container flex> <label>From date</label> <ma-date-picker ng-model="from"></ma-date-picker> </md-input-container> <md-input-container flex> <label>To date</label> <ma-date-picker ng-model="to"></ma-date-picker> </md-input-container> </div> <!-- Fix the dodgy axis shaping when using the 3D effect --> <style> .amcharts-axis-grid { fill-opacity:0 } </style> <h2 style="text-align: center">Water Meters</h2> <ma-point-values point-xid="Albany_Day_HospDP_ID-1_CH8_Value" values="PotableHwsMeterValues" from="from" to="to" rollup="DELTA" rollup-interval="4 hours"></ma-point-values> <ma-point-values point-xid="Albany_Day_HospDP_ID-1_CH7_Value" values="NonPotableHwsMeterValues" from="from" to="to" rollup="DELTA" rollup-interval="4 hours"></ma-point-values> <ma-serial-chart flex="" style="height: 300px; width: 100%;" series-1-title="Potable HWS Meter" series-2-title="Non-Potable HWS Meter" series-1-values="PotableHwsMeterValues" series-2-values="NonPotableHwsMeterValues" series-1-color="rgb(18,143,35)" series-2-color="rgb(149,12,245)" series-1-type="column" series-2-type="column" series-2-axis="left-2" legend="true" balloon="true" options="{strictMinMax: true, synchronizeGrid: false,depth3D:10, angle:45, plotAreaFillAlphas:0, valueAxes:[{minimum:0, title:'Non-Pot (Kl)', axis:left}, {minimum:0, axis:right}, {minimum:0, title: 'Potable (Kl)', axis:left-2}, {minimum:0, axis:right-2}]}" graph-options="[{clustered: true},{clustered: true}]" export="true" stack-type="none"> </ma-serial-chart> <h2 style="text-align: center">Temperatures</h2> <ma-point-values point-xid="Albany_Day_HospDP_9b37bd5b-e8e6-4d25-829d-1e7ac3205082" values="PotableHwsTempValues" from="from" to="to" rollup="SIMPLIFY" auto-rollup-interval="true"></ma-point-values> <ma-point-values point-xid="Albany_Day_HospDP_054db421-f7a5-4890-a6d3-da70ca3101d6" values="NonPotableHwsTempValues" from="from" to="to" rollup="SIMPLIFY" auto-rollup-interval="true"></ma-point-values> <ma-serial-chart flex="" style="height: 300px; width: 100%; fill-opacity:1" series-1-title="Potable HWS Temperature" series-2-title="Non-Potable HWS Temperature" series-1-values="PotableHwsTempValues" series-2-values="NonPotableHwsTempValues" series-1-color="#ed2323" series-2-color="#e3f20e" series-1-type="smoothedLine" series-2-type="smoothedLine" series-2-axis="left" legend="true" balloon="true" options="{strictMinMax: true, synchronizeGrid: false, depth3D:20, angle:45, plotAreaFillAlphas:0, valueAxes:[]}" graph-options="[{clustered: true},{clustered: true}]" export="true" stack-type="none"> </ma-serial-chart> <h2 style="text-align: center">Cold Water Pressure</h2> <ma-point-values point-xid="Albany_Day_HospDP_ad81b12e-81c2-4d6f-900d-fa09d4bbe847" values="CWS_US_Filtration" from="from" to="to" rollup="SIMPLIFY" auto-rollup-interval="true"></ma-point-values> <ma-point-values point-xid="Albany_Day_HospDP_33855fed-e4a9-4992-85b0-cd2e575b107b" values="CWS_DS_Filtration" from="from" to="to" rollup="SIMPLIFY" auto-rollup-interval="true"></ma-point-values> <ma-serial-chart flex="" style="height: 300px; width: 100%; fill-opacity:1" series-1-title="Up-Stream Pre-Filter" series-2-title="Down-Stream Pre-Filter" series-1-values="CWS_US_Filtration" series-2-values="CWS_DS_Filtration" series-1-color="#1414e0" series-2-color="#0eefb3" series-1-type="smoothedLine" series-2-type="smoothedLine" series-2-axis="left" legend="true" balloon="true" options="{strictMinMax: true, synchronizeGrid: false, depth3D:20, angle:45, valueAxes:[]}" graph-options="[{clustered: true},{clustered: true}]" export="true" stack-type="none"> </ma-serial-chart> <h2 style="text-align: center">Hot Water Pressure</h2> <ma-point-values point-xid="Albany_Day_HospDP_2610803d-5b33-4bec-8cdf-25922890c54d" values="PHWSoutPressure" from="from" to="to" rollup="SIMPLIFY" auto-rollup-interval="true"></ma-point-values> <ma-point-values point-xid="Albany_Day_HospDP_273356ac-0928-4c78-ade4-8c6d77c2aa28" values="NPHWSoutPressure" from="from" to="to" rollup="SIMPLIFY" auto-rollup-interval="true"></ma-point-values> <ma-serial-chart flex="" style="height: 300px; width: 100%; fill-opacity:1" series-1-title="Potable Hot Water" series-2-title="Non-Potable Hot Water" series-1-values="PHWSoutPressure" series-2-values="NPHWSoutPressure" series-1-color="#40e50d" series-2-color="#efbe0e" series-1-type="step" series-2-type="step" series-2-axis="left" legend="true" balloon="true" options="{strictMinMax: true, synchronizeGrid: false, depth3D:20, angle:45, valueAxes:[{minimum:0, maximum:1000, title:'Pressure (kPa)', axis:left}, {minimum:0, axis:right}, {minimum:0, axis:left-2}, {minimum:0, axis:right-2}]}" graph-options="[{clustered: true},{clustered: true}]" export="true" stack-type="none"> </ma-serial-chart> </md-card-content> </md-card> </div> -
Ok, so I've just discovered that grabbing the browser window and making it smaller and larger a few times brings the charts back up until I change the dates again??
Video if required.
https://youtu.be/01-R0y8eUhk -
I copied your code and changed all the xids to a mango internal xid and could not replicate the issue. Can you give the page some time to render and see what happens after 30 seconds? I think your point queries might be taking some time.
-
Thanks Craig,
Yeah it's a bit strange, I did try leaving the page to load for over 30minutes just as a test but the only thing that gets the charts up is refresh the browser or adjusting the size of the window, both of which work instantly.I'll keep looking.
Cheers! -
Try removing the flex="" from the charts and see what happens. ??
-
Thanks Craig, That looks like the problem, Didn't even see that there .
Cheers!
