Gauge styles

[Jared Wiltshire]

Hi @georgestefan we do not have a built in gauge like the first. I can however help you make the second gauge a 180 degree half gauge if this is better?

[edit] You can certainly create your own component similar to the first gauge if you are familiar with Angular/HTML and CSS. We can also help you with this but its outside the scope of the forum.

[georgestefan]

The thing that i like at the first gauge is that the red part is proportional with the value, i can put colors to the second gauge but they are fixed.

And, yes, I would like to make a 180 degree half gauge...

[Jared Wiltshire]

@georgestefan said in Gauge styles:

The thing that i like at the first gauge is that the red part is proportional with the value, i can put colors to the second gauge but they are fixed.

Unfortunately our built in gauges do not support this. You will need to build your own gauge.

@georgestefan said in Gauge styles:

And, yes, I would like to make a 180 degree half gauge...

You can set the start and end angles of the gauge like so -

<ma-gauge-chart point="point" options="{axes: [{startAngle: -90, endAngle:90}]}"></ma-gauge-chart>

[georgestefan]

@jared-wiltshire Ok, thank you.

I found this code and it is exactly what I need but I am not able to implement it in dashboard designer, can you help me with that? It is there a way to use this?

<ng-gauge size="150" type="full" thick="5" 
          min="0" max="120" value="68.2" 
          cap="round" label="Speed" append="mph"
          foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>

[Will Geller]

<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

• it does look to be doable with amCharts

I will try to share a modified version of out component that can do so.

[Will Geller]

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.

[georgestefan]

@will-geller Thank you, this is similar with the gauge that I want...

[Wingnut2.0]

@will-geller
Thank you for providing the modified file. When comparing the codepen example to snippet you provided, there is a significant difference in the line thickness. Is this due to the innerRadius and radius settings of the bands and arrow? If so, how are these attributes set? I am guessing this is done using the options param similar to

options="{axes: [{startAngle: -90, endAngle:90}], radius: '50%'}"

but I cant seem to get the format of the parameters correct. Would you be able to provide an example please?

Thank you

[Jared Wiltshire]

@Wingnut2-0 I'd suggest not overriding your gaugeChart.js file with the one Will provided. That is over 6 months out of date and will likely cause problems. @Will-Geller no longer works for us so will not be able to reply.

radius is not a gauge chart option and will not do anything. The reference for the options is here - https://docs.amcharts.com/3/javascriptcharts/AmAngularGauge

Reference the codepen example to see what options you should set - https://codepen.io/anon/pen/rGVKNM

[Wingnut2.0]

Thanks for the reply and update. I have created an example of the gauge I am looking for using the AMCharts live editor https://live.amcharts.com/

The example code is below. To clarify, when you say radius is not a gauge chart option, are you referring to an object within mango?

{
	"type": "gauge",
	"marginBottom": 20,
	"marginTop": 40,
	"startDuration": 0,
	"fontSize": 13,
	"theme": "dark",
	"arrows": [
		{
			"id": "GaugeArrow-1",
			"innerRadius": "35%",
			"nailRadius": 0,
			"radius": "170%",
			"value": 100
		}
	],
	"axes": [
		{
			"axisThickness": 0,
			"bottomText": "0 km/h",
			"bottomTextYOffset": -20,
			"centerY": "-6%",
			"endAngle": 90,
			"endValue": 100,
			"fontSize": -7,
			"id": "GaugeAxis-1",
			"labelOffset": 8,
			"minorTickLength": 6,
			"startAngle": -90,
			"tickAlpha": 0.42,
			"valueInterval": 20,
			"bands": [
				{
					"alpha": 0.7,
					"color": "#00CC00",
					"endValue": 100,
					"gradientRatio": [
						0.5,
						0,
						-0.5
					],
					"id": "GaugeBand-1",
					"innerRadius": "105%",
					"radius": "174%",
					"startValue": 0
				}
			]
		}
	],
	"allLabels": [],
	"balloon": {},
	"titles": []
}

From the above I have attempted the following without any luck.

<ma-gauge-chart point="myPoint" start="0" end="100" band-1-end="100" band-1-color="#00CC00" gradientRatio="[0.5,0,-0.5]" band-1-innerRadius= "105%" band-1-radius= "174%" arrow-alpha="0" arrow-innerRadius= "35%" arrow-radius= "170%" value-offset="-80" value-font-size="30" axis-thickness="1" options="{axes: [{startAngle: -90, endAngle:90}]}" style="width:100%; height:250px" animate-band-mode="true"></ma-gauge-chart>

[Jared Wiltshire]

@wingnut2-0 said in Gauge styles:

The example code is below. To clarify, when you say radius is not a gauge chart option, are you referring to an object within mango?

No, I am referring to the amCharts options for gauge charts as per the linked document. The options="" attribute is passed through to amCharts.

@wingnut2-0 said in Gauge styles:

From the above I have attempted the following without any luck.

You have only passed through a small subset of the options you specified in your configuration to the component. Also the animate-band-mode="true" attribute is not a valid attribute for <ma-gauge-chart>. This was something that Will put into a modified version of the component and it will not do anything for the current version of the component.