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...))