• 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

    Adaptive Layout Page Templates: Chart Scaling Issue

    Mango Automation general Discussion
    4
    6
    1.5k
    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.
    • H
      henryblu
      last edited by

      Hi,

      I've had an issue with using the page templates and the scaling of my charts for viewing on multiple devices. I've created an example here to explain.

      Using the following command we produce a pie chart:

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

      Also, using the following command supplied by the example page templates, we can create a 4 card dashboard:

      <div flex layout="column" layout-fill>
          <div flex layout="column" layout-gt-sm="row">
              <md-card flex>
                  <md-card-content>
                      Card 1
                  </md-card-content>
              </md-card>
      
              <md-card flex>
                  <md-card-content>
                      Card 2
                  </md-card-content>
              </md-card>
          </div>
          <div flex layout="column" layout-gt-sm="row">
              <md-card flex>
                  <md-card-content>
                      Card 3
                  </md-card-content>
              </md-card>
      
              <md-card flex>
                  <md-card-content>
                      Card 4
                  </md-card-content>
              </md-card>
          </div>
      </div>
      

      I have placed a pie chart in one of the cards:

      <div flex layout="column" layout-fill>
          <div flex layout="column" layout-gt-sm="row">
              <md-card flex>
                  <md-card-content>
                  <ma-pie-chart style="height: 300px; width: 600px" values='[ { "value": 30, "text": "hot", "color": "#ff9300" }, { "value": 70, "text": "cold", "color": "#942192" } ]' options="{depth3D:15,angle:30}"></ma-pie-chart>
                  </md-card-content>
              </md-card>
      
              <md-card flex>
                  <md-card-content>
                      Card 2
                  </md-card-content>
              </md-card>
          </div>
          <div flex layout="column" layout-gt-sm="row">
              <md-card flex>
                  <md-card-content>
                      Card 3
                  </md-card-content>
              </md-card>
      
              <md-card flex>
                  <md-card-content>
                      Card 4
                  </md-card-content>
              </md-card>
          </div>
      </div>
      

      This produces the following output:
      0_1499153739621_3cc2bf16-da6b-4bd8-90b1-6bf168bb66d8-image.png

      Now modifying the width of the chart to

      style="height: 300px; width: 100%"
      

      I get the following output:
      0_1499153874540_14570ba1-7fd8-42e4-8e59-fbdfff3403d7-image.png
      Which works, and I am happy. However, when I modify the height of the chart to autoscale, i.e.

      style="height: 100%; width: 100%"
      

      The chart effectively has 0 height, and appears like this:
      0_1499154008110_9f862a73-8192-4e71-a869-b46868e3690b-image.png

      This is frustrating me as I do not want to fix the height of my charts inside this template - as they look incorrect on difference devices. I'm also confused because it appears to work for pictures, but not for charts and other objects. For instance:

      <div flex layout="column" layout-fill>
          <div flex layout="column" layout-gt-sm="row">
              <md-card flex>
                  <md-card-content>
                    <img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
                  </md-card-content>
              </md-card>
      
              <md-card flex>
                  <md-card-content>
                    <img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
                  </md-card-content>
              </md-card>
          </div>
          <div flex layout="column" layout-gt-sm="row">
              <md-card flex>
                  <md-card-content>
                    <img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
                  </md-card-content>
              </md-card>
      
              <md-card flex>
                  <md-card-content>
                    <img id="46b1f6e0-2357-4356-bcb0-198a58d52d3a" style="height: 100%;width:100%" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
                  </md-card-content>
              </md-card>
          </div>
      </div>
      
      

      Produces:
      0_1499154710001_e8031a9e-ae86-4c4a-85a8-42c9cfe92d76-image.png
      Which is exactly what I would like to have because as you vary the size of the browser window the picture will not exceed the size of the card.

      Do you have any possible suggestions which will allow me to 'place' a chart in a card and vary with browser window without the chart having fixed dimensions and 'spilling' over the edge of the card?

      Thank you in advance!

      1 Reply Last reply Reply Quote 0
      • Jared WiltshireJ
        Jared Wiltshire
        last edited by

        @henryblu the reason that images work is because the browser is displaying them with a fixed aspect ratio. For example the image you linked has a natural size of 1000px by 500px, so it has an aspect ratio of 1.5. The browser is laying out the cards with 50% of the width each, it works out the width of the card and calculates the height of the image as (width / 1.5).

        The charts do not have a natural aspect ratio so the cards end up with 0 height.

        I'd recommend giving the charts a fixed height and set their width to 100%.

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • Z
          zenvakil
          last edited by

          Hi Henry,

          May be a stupid question, but is there a way to give them an aspect ratio?

          1 Reply Last reply Reply Quote 0
          • MattFoxM
            MattFox
            last edited by

            use viewport width.

            height:0.3vw;
            

            Fox

            Do not follow where the path may lead; go instead where there is no path.
            And leave a trail - Muriel Strode

            1 Reply Last reply Reply Quote 0
            • Z
              zenvakil
              last edited by

              worked like a charm, thanks always for the help @MattFox.

              Another question that will again probably be very basic, is there a way for me to auto centre a <ma-tank-level> or a <ma-gague-chart> within a card?

              1 Reply Last reply Reply Quote 0
              • MattFoxM
                MattFox
                last edited by

                Yes, use the flex attribute - some of card examples show how it works. Just replace their md-cards with divs.
                Read up on angularJs material's flex. Or read up on using CSS grid on how to put components in the centre. css tricks has an excellent tutorial.
                Sorry don't have time right now to give you a complete example.
                Can always do so later tonight.

                Fox

                Do not follow where the path may lead; go instead where there is no path.
                And leave a trail - Muriel Strode

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