Solved Multiple Watch List Charts

[budilmk]

Hi,

How to configure multiple Watch List Charts to get data based on different Watch Lists sources on the same page?

I'm using the dashboard designer.

Thanks
Budi

[Jared Wiltshire]

This can be done but you will need to dive into the markup a little.

Start by creating a dashboard, linking it to a watch list then add two watch list charts. Then toggle the "Edit markup" view. You should see something like this.

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="fa100ec2-ebc2-459a-aaba-ce5d9c0b27c7" watch-list-xid="WL_ac76beaa-10f4-40f0-b714-d0fda1c1e801"></ma-watch-list-get>
<div class="ma-designer-root" id="413a042a-e638-453f-97ea-b2cc88e5f1c3" style="width: 1024px; height: 768px; position: relative;">
    <ma-watch-list-chart id="15ca09c3-30ae-4b29-8e08-74043399c95c" watch-list="designer.watchList" points="designer.points" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" style="position: absolute; width: 400px; height: 200px; left: 79px; top: 35px;"></ma-watch-list-chart>
    <ma-watch-list-chart id="5d407e94-3820-4e74-abd2-66e8df46fe3c" watch-list="designer.watchList" points="designer.points" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" style="position: absolute; width: 400px; height: 200px; left: 79px; top: 265px;"></ma-watch-list-chart>
</div>

What you need to do is duplicate the ma-watch-list-get element and change its ng-model, parameters, and on-points-change attributes, I just added a 2 to the end. Also set watch-list-xid to the second watchlist's XID.

Then modify one of the ma-watch-list-chart elements to reference the second watch list and points (change its watch-list and points attributes).

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="fa100ec2-ebc2-459a-aaba-ce5d9c0b27c7" watch-list-xid="WL_ac76beaa-10f4-40f0-b714-d0fda1c1e801"></ma-watch-list-get>
<ma-watch-list-get ng-model="designer.watchList2" parameters="designer.parameters2" on-points-change="designer.points2 = $points" id="fa100ec2-ebc2-459a-aaba-ce5d9c0b27c7" watch-list-xid="WL_c94d8ac7-1936-4667-804d-5c0fba7f86cd"></ma-watch-list-get>
<div class="ma-designer-root" id="413a042a-e638-453f-97ea-b2cc88e5f1c3" style="width: 1024px; height: 768px; position: relative;">
    <ma-watch-list-chart id="15ca09c3-30ae-4b29-8e08-74043399c95c" watch-list="designer.watchList" points="designer.points" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" style="position: absolute; width: 400px; height: 200px; left: 79px; top: 35px;"></ma-watch-list-chart>
    <ma-watch-list-chart id="5d407e94-3820-4e74-abd2-66e8df46fe3c" watch-list="designer.watchList2" points="designer.points2" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" style="position: absolute; width: 400px; height: 200px; left: 79px; top: 265px;"></ma-watch-list-chart>
</div>

[budilmk]

Hi,

Thanks for the solution. How to adjust the footer "Powered by Mango Automation ..." to the bottom of the page? Currently, it is cutting through the middle of the second chart.

Budi

[JoelHaggar]

Looks like there might be a bug with the footer. We'll look into a solution and get back to you. Thanks.

[Jared Wiltshire]

@budilmk can you post a screenshot please.

[Jared Wiltshire]

@budilmk Are you using ma-scale-to on the root element?

[budilmk]

@jared-wiltshire Oh yes, I want it to be viewable on mobile.

<div class="ma-designer-root" id="effb4da9-3871-4f92-ac67-a4a1c1327fce" style="width: 1265px; height: 944px; position: relative; box-sizing: inherit; max-width: inherit; min-width: inherit;" ma-scale-to="window" ma-maintain-ratio="to-width" ma-center="false">

[budilmk]

And also, could you include the edit menu setting on home, prob under system setting.

This is because I accidentally disabled the administration menu on the sidebar via the edit menu setting and it took me quite a while to get it back.

[Jared Wiltshire]

@budilmk said in Multiple Watch List Charts:

@jared-wiltshire Oh yes, I want it to be viewable on mobile.

Unfortunately using ma-scale-to="window" will do just that, enlarge everything so it fits to the whole window. This means if you use it inside the UI things will be scaled too big. It only works with the menu and toolbar hidden (add a menu item then choose the parent to be root).

We will be improving this feature in an upcoming release.

@budilmk said in Multiple Watch List Charts:

And also, could you include the edit menu setting on home, prob under system setting.
This is because I accidentally disabled the administration menu on the sidebar via the edit menu setting and it took me quite a while to get it back.

There is an "Edit menu" link under administration. If you ever hide it by accident you can access it by navigating to /ui/administration/edit-menu