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.
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.
-
@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
-
@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.
-
@tomatopi a VU meter sounds like a good component to make... I think I'll give it a go..
Fox
-
@tomatopi Would this work for you?
-
@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.
-
@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
-
@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!
-
@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.
-
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.
