<![CDATA[Adaptive Layout Page Templates: Chart Scaling Issue]]>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!

]]>https://forum.mango-os.com/topic/2838/adaptive-layout-page-templates-chart-scaling-issueRSS for NodeThu, 14 May 2026 13:06:42 GMTTue, 04 Jul 2017 07:58:07 GMT60<![CDATA[Reply to Adaptive Layout Page Templates: Chart Scaling Issue on Thu, 22 Apr 2021 00:45:58 GMT]]>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

]]>https://forum.mango-os.com/post/26572https://forum.mango-os.com/post/26572Thu, 22 Apr 2021 00:45:58 GMT<![CDATA[Reply to Adaptive Layout Page Templates: Chart Scaling Issue on Thu, 22 Apr 2021 00:28:15 GMT]]>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?

]]>https://forum.mango-os.com/post/26571https://forum.mango-os.com/post/26571Thu, 22 Apr 2021 00:28:15 GMT<![CDATA[Reply to Adaptive Layout Page Templates: Chart Scaling Issue on Wed, 21 Apr 2021 09:19:39 GMT]]>use viewport width.

height:0.3vw;

Fox

]]>https://forum.mango-os.com/post/26570https://forum.mango-os.com/post/26570Wed, 21 Apr 2021 09:19:39 GMT<![CDATA[Reply to Adaptive Layout Page Templates: Chart Scaling Issue on Wed, 21 Apr 2021 08:59:49 GMT]]>Hi Henry,

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

]]>https://forum.mango-os.com/post/26569https://forum.mango-os.com/post/26569Wed, 21 Apr 2021 08:59:49 GMT<![CDATA[Reply to Adaptive Layout Page Templates: Chart Scaling Issue on Wed, 05 Jul 2017 17:54:43 GMT]]>@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%.

]]>https://forum.mango-os.com/post/14809https://forum.mango-os.com/post/14809Wed, 05 Jul 2017 17:54:43 GMT