Hi guys,

Thanks very much for the advice. Upon @Jared-Wiltshire's recommendation I pasted my
Google Analytics Property ID into the UI settings page. It's then as simple as creating an onclick event: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

<div flex layout="column" onclick="ga('send', 'event', 'buttons', 'click','B005');"></div>

From here I was able to view real-time and historic page interactions based on clicking. I could also create events for mouse moving, but it generates a lot of events as you would expect and in google analytics you are limited to 500 hits per session or 10 million events per month.

<div flex layout="column" onmousemove="ga('send', 'event', 'mouse', 'move','B005');"></div>

Really happy though - exactly what I was after.
0_1512363020533_79cc2909-7665-4277-8ef0-f8983f6165ca-image.png

Thanks Jared,

It does work fine on Chrome and Firefox. I think the signs firmware might be the issue. Yesterday they released a new firmware update https://brightsign.zendesk.com/hc/en-us/articles/218067927-Firmware-Release-Notes - which mentions there is a new JavaScript API. I'll try that and let you know how I go.

Cheers.

@henryblu It sounds like you are going to need to write some specialized logic in JavaScript. I'd suggest adding a custom component via the user module, see https://help.infiniteautomation.com/getting-started-with-a-user-module/

You can leverage our maStatistics and maPointValues services to pull data from the REST API then process and output the data onto the page from the component. You can use the moment.js library directly inside your component, also we recently added the math.js library which might be useful. It has statistics and matrix functions.

Thank you @Jared-Wiltshire - simple fix. Simply using Angular Material Tabs solves the issue.

Cheers,
Henry

Excellent, thanks guys - perfect fix.

Hi Henry,

You should consult the logs in a time like this, either at Mango/logs/ma.log or /logging_console.shtm

Alright, great help @mattfox & @Jared-Wiltshire. Thanks a lot!

Thanks Jared, that's perfect.

Perfect, Thank you!

Of course! Thank you very much - Resolved.

You can add a stylesheet via UI Settings. e.g.
0_1500047928595_9817a9f6-6202-42f9-bc7a-243a32e40319-image.png

A quick example would be

.amcharts-axis-label { font-size: 16px; }

You can find the classnames in the amCharts documentation or use a browser inspection tool to example the elements of the svg and check which classes are on them. (e.g. in Chrome, right click something then select "Inspect").

That looks right, you probably just havent linked to the file from the UI settings page. It should look like this

0_1499874100270_31f5a1d0-e9cc-412c-bbd8-41a7422d8c20-image.png

Be sure to hit save at the top of the page.

That's exactly what I was after - thank you very much!

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

Thank you so much for that Jared - worked as expected!

Excellent! Thanks Jared, the following code worked perfectly:

<ma-now update-interval="1 HOURS" output="theTimeNow"></ma-now> <ma-point-values point-xid="Site_Total_Real_Power" point="point1" values="max_val" from="theTimeNow | maMoment:'startOf':'day'|maMoment:'subtract':7:'days'" to="theTimeNow" rollup="MAXIMUM" rollup-interval="1 DAYS"> </ma-point-values> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="max_val" series-1-point="point1" default-type="column"> </ma-serial-chart>