• 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

    md-card affecting Chart render??

    Dashboard Designer & Custom AngularJS Pages
    2
    6
    1.4k
    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.
    • P
      Pikey4
      last edited by

      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>
      

      Mango Core version: 3.5.6
      Mango API module version: 3.5.2
      MangoUi module version: 3.5.5
      Platform: 10.14 MacOS Mojave
      Chrome: Version 70.0.3538.110 (64-bit)

      1 Reply Last reply Reply Quote 0
      • P
        Pikey4
        last edited by

        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

        Mango Core version: 3.5.6
        Mango API module version: 3.5.2
        MangoUi module version: 3.5.5
        Platform: 10.14 MacOS Mojave
        Chrome: Version 70.0.3538.110 (64-bit)

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

          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.

          1 Reply Last reply Reply Quote 0
          • P
            Pikey4
            last edited by

            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!

            Mango Core version: 3.5.6
            Mango API module version: 3.5.2
            MangoUi module version: 3.5.5
            Platform: 10.14 MacOS Mojave
            Chrome: Version 70.0.3538.110 (64-bit)

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

              Try removing the flex="" from the charts and see what happens. ??

              1 Reply Last reply Reply Quote 0
              • P
                Pikey4
                last edited by

                Thanks Craig, That looks like the problem, Didn't even see that there .

                Cheers!

                Mango Core version: 3.5.6
                Mango API module version: 3.5.2
                MangoUi module version: 3.5.5
                Platform: 10.14 MacOS Mojave
                Chrome: Version 70.0.3538.110 (64-bit)

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