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

amCharts - maTankLevel center chart column in div


  • Hi - need a little help centering maTankLevel column in div...

    When using the ma-tank-level component, its width is greater than the actual chart data path. I've perused the amCharts documentation, and can't find a way to either center the data in the chart div, or to get the actual pixel width of the data element (column, in this case).

    I can hack it by placing the directive in a narrower div, but I can't dynamically size the containing div to the column size.

    html: (not relevant commented out; css below)

    <div id="09u098" class="table-block-top">
                <table class="first-table">
                    <thead>
                        <tr class="tank-row">
                            <th class="tank-col caption">FILLING</th>
                            <th></th>
                            <th class="tank-col caption">READY</th>
                        </tr>
                    </thead> -->
                    <tbody>
                        <tr class="tank-block">
                            <td id="tank1" class="tank-box"><ma-tank-level id="tank1Tank" class="ma-tank" options="{angle: 12}"></ma-tank-level></td>
                            <td></td>
                            <td id="tank2" class="tank-box"><ma-tank-level id="tank2Tank" class="ma-tank" options="{angle: 12}"></ma-tank-level></td>
                            
                        </tr>
                       /* <!-- <tr class="tank-row">
                            <td class="button">
                               <ma-switch-img class="rotate-180" id="569459e8-da3b-48e6-b127-bb9081b1342e" style="position: relative; width: 44px; height: 44px;" default-src="/rest/v2/file-stores/default/icons/button-153683_640.png" src-false="/rest/v2/file-stores/default/icons/button-153683_640.png" src-true="/rest/v2/file-stores/default/icons/button-153683_640.png" point-xid="DP_t1_fill"></ma-switch-img> 
                            </td>
                            <td class="text-lbl">FILL</td>
                            <td class="button">
                                <ma-switch-img class="rotate-180" id="569459e8-da3b-48e6-b127-bb9081b1340a" style="position: relative; width: 44px; height: 44px;" default-src="/rest/v2/file-stores/default/icons/button-153683_640.png" src-false="/rest/v2/file-stores/default/icons/button-153683_640.png" src-true="/rest/v2/file-stores/default/icons/button-153683_640.png" point-xid="DP_t1_fill"></ma-switch-img>
                            </td>
                        </tr>
                        <tr class="tank-row">
                            <td class="button">
                                <ma-switch-img id="b5a74da4-554e-48e0-beb6-96f2bd6e4bc4" style="position: relative; height: 46px; width: 46px" toggle-on-click="true" default-src="/rest/v2/file-stores/default/icons/slim-green-led-on-th.png" point-xid="DP_t1_fill"></ma-switch-img>
                            </td>
                            <td class="text-lbl">SEL</td>
                            <td class="button">
                                <ma-switch-img id="b5a74da4-554e-48e0-beb6-96f2bd6e4bc4" style="position: relative; height: 46px; width: 46px" toggle-on-click="true" default-src="/rest/v2/file-stores/default/icons/slim-green-led-on-th.png" point-xid="DP_t1_fill">1</ma-switch-img>
                            </td>
                        </tr>
                        <tr class="tank-row">
                            <td class="text-val">Tank 1</td>
                            <td></td>
                            <td class="text-val">Tank 2</td>
                        </tr>
                    </tbody>
                </table>
    ...
    </div> --> */
    

    relevant css:

    .tank-block {
       position: relative;
       /*left: 0px;
       top: 0px;*/
       padding: 20px;
       width: 400px;
       height: 300px; 
    }
    
    .tank-box {
      position: relative;
      display: inline-block;
      width: 175px; 
      height: 250px;
      padding:0 0;
    }
    
    .ma-tank {
       position: relative;
       height: 100%;
       width: 275px;
    }
    .table-block-top {
        display: flex;
        justify-content: flex-start;
    }
    table {
        max-width: 25%;
        /*display: inline-block;*/
        border: none;
        text-align: center;
        border-collapse: collapse;
        font-size: 1em;
        margin: 0 30px;
    }
    table.first-table {
        padding-left:5px;
    }
    table td, table th {
        border: none;
    }
    
    table tbody td {
        text-align: center;
    }
    .tank-row {
        height: 75px;
    }
    
    

  • @bullitbd I haven't dug too much into your code, but I think the crux of your issue is that you want the tank element to fit to the outside containing element?

    Here's a minimal code example that demonstrates how to do this -

    <div class="ma-designer-root" id="c00f126c-86e9-46a4-9282-a36865b9451a" style="width: 1366px; height: 768px; position: relative;">
        <div id="362df9d5-1eb8-4321-8a22-740ee3c3b903" style="position: absolute; width: 159px; height: 257px; left: 166px; top: 85px;">
            <ma-tank-level point-xid="voltage" max="5" style="width: calc(100% + 95px); height: 100%;"></ma-tank-level>
        </div>
    </div>
    

    Basically setting it to 100% height and width but making adding 95px to the width.


  • Actually here's a second method which is a little more straightforward

    <div class="ma-designer-root" id="c00f126c-86e9-46a4-9282-a36865b9451a" style="width: 1366px; height: 768px; position: relative;">
        <div id="3facd1f4-cc6e-435f-a3f4-7641f450a1c8" style="position: absolute; width: 287px; height: 299px; left: 436px; top: 115px;">
            <ma-tank-level point-xid="voltage" max="5" style="width: 100%; height: 100%;" options="{marginRight: -74}"></ma-tank-level>
        </div>
    </div>
    

  • @jared-wiltshire said in amCharts - maTankLevel center chart column in div:

    marginRight: -74

    Aha! Thank you Jared! I was barking up another tree... sorry for all the code - TMI