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.