GB AM Gauges

How to Make Your Own

Start by dragging out AM|Gauge from the components menu
Resize the gauge to the desired size

Next were going to put the AM|Gauge in a group
A simple way of doing this is by dragging out another component
- Drag out the button component and select both components
- Right click and select create group
- Then delete the other component, leaving only the AM|Gauge in the group

Next were going to add a tag on the group so we can access it from the program
To do this, click on the group, and a tag icon will appear in the corner
Click on the tag icon, and type the name of your tag in the box and click the checkmark icon
You can name your tag whatever you want, as long as it matches the program target filter in the Program

To add a program, go to the programs menu on the left side
Click the + icon on the bottom left of the programs menu
In the Program Editor, type in the name of the tag applied to the group in the Program Target Filter
If you would like to name your program, replace New Program under Program Name with what you would like to name your program

Next click the three dots in the top right and select variables
This will open the program vars panel, click the + icon on the right side
A newVariable will appear, click on the gear icon that appears as you hover over the newVariable
On the first line type point and the second line type id==$virtualPointRef
Click the gray save button to save the variable
Last, copy and paste the code below into the main part of the program, and click the blue save button

var template = this;
finstack.eval(point.query, function(data){
myPoints=data.result.toObj();

var gaugeChart = AmCharts.makeChart( Gauge.view, {
"type": "gauge",
"faceBorderWidth": 0,
"marginBottom": 20,
"marginTop": 40,
"startDuration": 0,
"color": "#04384A",
"fontSize": 55,
"dataProvider": myPoints,
"theme": "light",
"arrows": [
{
	"color": "#001E4A",
	"id": "GaugeArrow-1",
	"innerRadius": "79%",
	"nailAlpha": 0,
	"radius": "100%",
	"startWidth": 30,
	"value": myPoints[0].curVal
}
],
"axes": [
{
	"axisThickness": 0,
	"bottomText": myPoints[0].curVal.toFixed(1)+ myPoints[0].unit+"\n"+myPoints[0].navName,
	"bottomTextYOffset": -170,
	"endAngle": 180,
	"endValue": 100,
	"fontSize": 13,
	"id": "GaugeAxis-1",
	"minorTickLength": 7,
	"startAngle": -180,
	"tickLength": 11,
	"valueInterval": 10,
	"bands": [
	{
	"alpha": 0.7,
	"color": "#e3e3e3",
	"endValue": 100,
	"id": "GaugeBand-1",
	"innerRadius": 220,
	"radius": 280,
    "gradientRatio": [
	0.2,
	0,
    -0.2
	],
	"startValue": 0
	},
	{
	"color": "#7093c1",
	"endValue": myPoints[0].curVal,
	"id": "GaugeBand-2",
    "gradientRatio": [
	0.2,
	0,
	-0.2
	],
	"innerRadius": 220,
	"radius": 280,
	"startValue": 0
	}
	]
}
],
	"allLabels": [],
	"balloon": {},
	"titles": []
});
});

To add a query go to the advanced properties and click the plus icon to add a property
Name the propery query
Replace the value with the query (for example: readAll(id==ect...))