positive and negative bar colors in chart

0
Hi Community, Does anyone know how to make positive numbers and negative numbers in one series have a different color when shown with the standard column chart widget? I’m looking for what I can add in the Advanced settings in the series to “convince” plotly to use green for positive, and red for negative in the series values.
asked
2 answers
0

Hi Ron,

It's probably easiest to use two series for that. One colored red, the other colored green. Using XPath you can retrieve values either < 0 for red and >= 0 for green.

If that doesn't work, you could look into colorscales or discrete colors.

answered
0

Hi Community, 

Marius’ answer prompted me to consider maybe selecting the data differently for my series rather than making two attributes in my entity (one for positive and one for negative values).

 

I finally got it to work by indeed doing two series for the same data attribute in my database.

For the first series I configured the XPath constraint field in the Edit Series Item/Data Source tab like this:

[MyFirstModule.Master_Child = '[%CurrentObject%]']

[Total < 0.0]

In Xpath language this means I am doing an AND :-).

 

(my Total attribute was a decimal type)

 

The first line only picks up Child records that are associated with the Master (which I had in a dataview on my page, and in this dataview I had the line chart widget)

 

The second line in the Xpath statement achieves what Marius was suggesting, but without the need to split the actual data in the entity in two attributes.

 

For the second series I then used this in the XPath constraint field in the Edit Series Item/Data Source tab for the same attribute as the series above.

 

[MyFirstModule.Master_Child = '[%CurrentObject%]']

[Total >= 0.0]

 

 

To make the markers a certain color I needed to add this in the Advanced tab of the Edit Series Item:

{

   "type": "bar",

   "width": "0.2",

   "marker": { "color": "red" }

}

I was using a line chart widget but wanted this series to show up as a bar.

Then the auto width of that bar was too wide so I made it smaller.

Finally, since this was a bar, I found a post in the forum (https://forum.mendix.com/link/questions/97723, thanks guys for the contribution) that I needed to use the marker construct as shown to change the bar color.

 

The above may still be wrong because I am still not 100% sure what the structure of plotly directives needs to be, so I may have combined things incorrectly, even if they work. Any directions on how to learn the correct plotly structure elements in some online tutorial that works for newbies are welcome.

 

Good directives or structure education is not too well described in Mendix documentation in my view. I could surely do with more details. I know there is a self training by Mendix on charts in the academy so I guess I need to take that before I say more, but maybe someone in Mendix support will take pity on all of us aspiring chart widget users and makes more example material available in a project and more detailed documentation on options (besides some of the cheat sheet I’ve already seen). the plotly docs alone are not helpful for beginners I have to say, but who knows, maybe I will become more of an expert some time :-).

answered