Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • Hello, I have in an interface for a plant the gauge from bellow:
    0_1505400583658_gauge.JPG
    But in new dashboard I found only this gauge:
    0_1505400691717_gauge2.JPG

    But I want to use first gauge, it's possible to find it somewhere?


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


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


  • @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>
    

  • @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>
    

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


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


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


  • @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


  • @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


  • 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>
    

  • @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.