<![CDATA[Change Bar Display bar-color based on point value]]>I'm trying to create a bar display of a point value, but I wanted the bar-color to be dependent on the value of the point.

I tried ng-style={color:...}, but that changed the text color along with the bar color making the text illegible.

I tried to put the same logic into bar-colour, but it didn't work.

I'm still trying to learn more about components, but I find it confusing since many documents are based on v3 or older. Duplicating the logic in the built-in bar display but with the color change and different defaults built in would be ideal, but I can't seem to wrap my brain around making it work. I created the userModule based on the tutorial, but that's as far as I got.

]]>https://forum.mango-os.com/topic/5648/change-bar-display-bar-color-based-on-point-valueRSS for NodeSat, 18 Apr 2026 23:17:27 GMTTue, 28 Feb 2023 18:48:21 GMT60<![CDATA[Reply to Change Bar Display bar-color based on point value on Thu, 02 Mar 2023 14:23:52 GMT]]>@tomatopi

point="water"

This code is assigning the point-value object to a variable in the local scope called water. Since we are working in javascript, variables must be valid javascript variables.

]]>https://forum.mango-os.com/post/27750https://forum.mango-os.com/post/27750Thu, 02 Mar 2023 14:23:52 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Thu, 02 Mar 2023 13:03:30 GMT]]>@CraigWeb I was trying this again and it couldn't get it to work, but I found the issue.

I used point="1water" and got a console error:

Token 'water' is unexpected token at column 2 of the expression [1water] starting at [water].

If I used point="water1", then it works. So if the first character of a point variable is a number, it barfs. I'm curious why that is? Is it documented anywhere? Seems a pretty important gotcha.

]]>https://forum.mango-os.com/post/27749https://forum.mango-os.com/post/27749Thu, 02 Mar 2023 13:03:30 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Wed, 01 Mar 2023 18:57:15 GMT]]>@CraigWeb I tried that before and it didn't work. I tried again and now it is working.

Probably a syntax error on my part. I may have used { ... } instead of {{ ... }} for the logic replicating what was in ng-style.

The learning curve is a little steep. Most searches for AngularJS comes back newer Angular information, or links on the forum are often broken or redirect to something newer. What programming I do is more server-side and not Java based so it's a little frustrating. It's nice to see more activity here now. Most definitely a help.

Thanks!

]]>https://forum.mango-os.com/post/27746https://forum.mango-os.com/post/27746Wed, 01 Mar 2023 18:57:15 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Wed, 01 Mar 2023 17:46:48 GMT]]>@tomatopi
Here is a example of a built in bardisplay:

<ma-get-point-value point="myPoint" point-xid="DP_bartest"></ma-get-point-value>
<ma-bar-display style="height: 100px; width: 40px; background-color:#a5a5a5"  bar-color="{{myPoint.value <10 ? 'red' : myPoint.value <20 ? 'orange': 'green'}}" point="myPoint" minimum="0" maximum="100" direction="bottom-to-top"></ma-bar-display>

You can use javascript ternary operators to decide on the color of the bar, you can also chain ternary operators to have 3 diff

]]>https://forum.mango-os.com/post/27745https://forum.mango-os.com/post/27745Wed, 01 Mar 2023 17:46:48 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Wed, 01 Mar 2023 14:39:29 GMT]]>@joeamiraglia That could very well do the trick. It would be similar to a VU meter, I think.

Is there any examples of how to implement that? A forum search led me to one thread, but it didn't really show a working example.

]]>https://forum.mango-os.com/post/27744https://forum.mango-os.com/post/27744Wed, 01 Mar 2023 14:39:29 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Wed, 01 Mar 2023 13:28:35 GMT]]>@tomatopi Would this work for you?

https://www.amcharts.com/demos-v3/bullet-chart-v3/

]]>https://forum.mango-os.com/post/27743https://forum.mango-os.com/post/27743Wed, 01 Mar 2023 13:28:35 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Wed, 01 Mar 2023 03:56:27 GMT]]>@tomatopi a VU meter sounds like a good component to make... I think I'll give it a go..

Fox

]]>https://forum.mango-os.com/post/27742https://forum.mango-os.com/post/27742Wed, 01 Mar 2023 03:56:27 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Tue, 28 Feb 2023 20:00:32 GMT]]>@MattFox Well, dang, that's far more involved than I expected.

I'm trying to find the best way to display moisture levels that's easy to glance at (since there will be near 100 of them). I want four colours to represent moisture content. Red (too dry), Orange (getting dry), Green (ideal), and Blue (over wet). Similar to a bar display or a tank or VU meter or something. I may fall back to a gauge display and have the third band end early so blue becomes blank.

I don't think I'm far enough into Mango/amcharts to write a modified serialChart directive.

]]>https://forum.mango-os.com/post/27741https://forum.mango-os.com/post/27741Tue, 28 Feb 2023 20:00:32 GMT<![CDATA[Reply to Change Bar Display bar-color based on point value on Tue, 28 Feb 2023 19:42:33 GMT]]>@tomatopi this is likely your best shot, but because they're using amcharts 3 you can't do what you want natively. https://stackoverflow.com/a/35995962
You'd basically be having to write a modified version of the serialChart directive just so you have this function.

Fox

]]>https://forum.mango-os.com/post/27740https://forum.mango-os.com/post/27740Tue, 28 Feb 2023 19:42:33 GMT