In this video training series we will cover how to build an app with Mango Dashboards 3.x. We will be creating a fully responsive single page application with multiple pages containing components for retrieving and displaying data from your Mango system.
Watch the Introduction:
View the entire Video Training Series on our Help Site
This set is geared more to first timers so feel free to reply with requests for future training videos.
Doesn't the hovered row highlighted with a lighter color help with this?
Axis titles can be done through options="{}" on <ma-serial-chart>
Try adding:
options="{valueAxes:[{axisColor:'blue', color:'blue', title: 'Hello Left', titleColor: 'blue'}, {axisColor:'red', color:'red', title: 'Hi Right', titleColor: 'red'}]}"
When using options="" you pass in an object and make sure you only use single quotes around the strings in the object. These are all properties of the valueAxes array which takes in seperate object for each axis configuration. You can leave out the color options if you like and just use title property.
See:
https://docs.amcharts.com/3/javascriptcharts/ValueAxis
PS
I think you are missing the single quotes around 'Title' in the code you posted.
It uses the translation file to pull the text set so you would change this part of setPointValue.html
from
<button ng-disabled="!point.pointLocator.settable || result.pending" ng-click="result=point.setValueResult(input.value)" ma-tr="common.set"
class="btn btn-default" ng-class="{'set-pending': result.pending, 'set-success': result.success, 'set-error': result.error}"></button>
to
<button ng-disabled="!point.pointLocator.settable || result.pending" ng-click="result=point.setValueResult(input.value)"
class="btn btn-default" ng-class="{'set-pending': result.pending, 'set-success': result.success, 'set-error': result.error}">TEXT</button>
Hi there,
this is quite simple to do here is a code snippet:
<h3>Select binary point:</h3>
<div layout="row">
<md-input-container flex>
<label>Choose a point</label>
<ma-point-list limit="200" ng-model="myPoint"></ma-point-list>
</md-input-container>
</div>
<p>
Point Value: <ma-point-value point="myPoint"></ma-point-value>
</p>
<p ng-hide="myPoint.value">
Watch me hide
</p>
or to hide when false:
<p ng-hide="!myPoint.value">
Watch me hide
</p>
or
<p ng-show="myPoint.value">
Watch me hide
</p>
You would use:
series-1-axis="left" series-2-axis="left-2" series-3-axis="right" series-4-axis="left-4"
I will update the docs to show the outer axis values
If you overrides your gaugeChart.js file with this modified version https://gist.github.com/WillGeller/49fd0a070ee887bb50d272e1299e20b9
(put it in {$Mango}/overrides/web/modules/mangoUi/web/ngMango/directives)
You should then be able to display the gauge chart with an animated band and no arrow with this code:
<ma-get-point-value point-xid="Demmy-outsidetemp" point="myPoint"></ma-get-point-value>
<h3>Modified to animate band end</h3>
<ma-gauge-chart point="myPoint" start="0" end="100" band-1-end="50" band-1-color="blue" band-2-end="100" band-2-color="red" arrow-alpha="0" value-offset="-100" value-font-size="40" options="{axes: [{startAngle: -90, endAngle:90}], radius: '50%'}" style="width:100%; height:250px" animate-band-mode="true"></ma-gauge-chart>
You can also remove the band-2.. attributes if you just want to display one band.
Seeing as it is a nice alternate look to the gauge chart I may include it in the next UI release and then you would not need the override file.
We have created many components that you can use for composing your custom dashboard pages. But occasionally you may want to extend the dashboard tools you have available by writing your own AngularJS code. Using the User Module feature you can add your own Angular components, directives, filters and controllers.
Read the full support article to learn how to leverage writing your own Angular code to extend the application.
In this video tutorial you can learn how to bind data point values to style elements with the Dashboard Designer. The general technique is to take a data point's value and use it in the ng-style attribute of image elements. CSS opacity fading, filter blurring/saturating, as well as animation speed are demonstrated.
View the support article for download the code and check out our newly organized content under Mango UI:
Just to chime in, If you are interested we have already built a component for working with the google map library. There is an example here /ui/examples/utilities/google-maps that shows how you can interact with the markers and set marker position based on lat/long values.
A lot less work then writing your own websocket subscription code to get data to MapBox library. There also may be AngularJS directives written that wrap MapBox and if you bring that in you could just bind the lat/long data in with HTML as we do with our map component.
Here's one for example: http://licyeus.github.io/angular-mapbox/
Using the userTheme option is limited in that it doesn't give you full control over being able to choose colors to theme your app with.
Advanced users can modify ${MA_HOME}/web/modules/mangoUI/web/ui/uiSettings.json if they wish to take color customization to the next level. Using the method explained in this support article you can create your own custom color palettes and themes that utilize the exact colors you specify.
We have created many components that you can use for composing your custom dashboard pages. But occasionally you may want to extend the dashboard tools you have available by writing your own AngularJS code. Using the User Module feature you can add your own Angular components, directives, filters and controllers.
Read the full support article to learn how to leverage writing your own Angular code to extend the application.
Here is a support article that covers the general process of setting up your own AngularJS module:
https://help.infiniteautomation.com/getting-started-with-a-user-module/
Hi George,
The best way to add custom javascript is to use the userModule feature as described here:
https://forum.infiniteautomation.com/topic/2831/publishing-live-dashboard/2
Essentially what you are doing is creating an angular module that is editable right from the UI Settings page. You can create your own controllers, components, directives, filters etc.
I plan to release a support article or video today that reveals the basics on how to work with this feature of Mango.
If you overrides your gaugeChart.js file with this modified version https://gist.github.com/WillGeller/49fd0a070ee887bb50d272e1299e20b9
(put it in {$Mango}/overrides/web/modules/mangoUi/web/ngMango/directives)
You should then be able to display the gauge chart with an animated band and no arrow with this code:
<ma-get-point-value point-xid="Demmy-outsidetemp" point="myPoint"></ma-get-point-value>
<h3>Modified to animate band end</h3>
<ma-gauge-chart point="myPoint" start="0" end="100" band-1-end="50" band-1-color="blue" band-2-end="100" band-2-color="red" arrow-alpha="0" value-offset="-100" value-font-size="40" options="{axes: [{startAngle: -90, endAngle:90}], radius: '50%'}" style="width:100%; height:250px" animate-band-mode="true"></ma-gauge-chart>
You can also remove the band-2.. attributes if you just want to display one band.
Seeing as it is a nice alternate look to the gauge chart I may include it in the next UI release and then you would not need the override file.
<ng-gauge> as you show must be from a different library. Rather then try to import that or build a component from scratch. I think with a bit of modification to our <ma-gauge-chart> you can create this type of chart.
Based on these examples:
https://docs.amcharts.com/3/javascriptcharts/AmAngularGauge#arrows
https://codepen.io/anon/pen/rGVKNM
I will try to share a modified version of out component that can do so.
Once you get that working you may want to play around with adding show-annotation-table="true" show-zoom-controls="true" attributes which you can include on <ma-annotate-chart> which display a table below the chart of the annotations and a zoom / calculate (click twice) mode that may be of interest
Can you got to http://localhost:8080/ui/administration/modules/upgrade check for upgrades and let me know what version of advancedComponents module you have.
The advancedComponents module has some functionality that originally wasn't intended for free public use so there may be some issues. But we don't mind you using it and I will try to help you out.
It looks like you do need the NoSQL module installed in order to post annotations. The module is included on the Mango ES or with an Enterprise license. If you don't have a license for the NoSQL module you can still install it but Mango will automatically shut down after several hours.
It looks like there is an bug in the code for the annotateChart component when running with core 3.1 so you will want to update the advancedComponents module with the one that will be released today (3.1.4)
Let me know if you think this is all worth it and you still run into issues after trying these steps