Can't understand the coloring of bar chart in webui

Question

I am trying to understand if I am running into a bug or intended behavior in the coloring of the bar chart widget….

I have three sets:

StoragePositions
Days
Products

I have a parameter supply that is defined over these three sets

Furthermore, I have a an element parameter that allows me to select a specific storage position in the GUI.

If the supply is only provided for one product, the bars in the widget show different colors (which is NOT what I would expect, because I set the product index in the grouped, or stacked, same behavior) part of the pivot in the widget settings:

If there is one more other product during the time horizon with a non-zero supply value, the colors are indeed calculated per product instead of every bar having its own:

This is the coloring I would expect (and in the first image I would expect all of the 5 bars to be of the same color).

Is there something I am missing in my own logic or is this a bug in the coloring within AIMMS?

Attached the small demo project that shows the behavior. Running this with AIMMS 4.96.9.3 at the moment

Koos Heerink · Accepted Answer

Coloring, in (most) widgets, is using the ordinal numbers of the associated set elements of one specific index that plays a role in the widget. This is done by adding CSS classes like 'Mod16Ord5' (for set elements with ordinal number 5, 21, ..etc.) which are mapped to colors by the CSS color palette that is being used.

The bar chart uses a built-in, hardcoded heuristic to select this so-called 'color index'. The gist of this heuristic is: the color-index is

the last index in the 'grouped' part (if any, and if the cardinality of entries in the 'grouped' part > 1), else
the last index in the 'stacked' part (if any, and if the cardinality of entries in the 'stacked' part > 1). else
the last index in the 'header' part (if any)

The reason we added the ‘if the cardinality of entries in the ‘...’ part > 1’ condition, is that in this case the color is not being used to differentiate the data being shown (on of the reasons people are using colors in charts in the first place), and we can probably find better use of the use of colors in the chart.

Btw, adding a 'fixed-element' or 'element-parameter' slice will effectively remove the associated index from a widget. As a result this index will not be used to determine the color anymore. In your example, this happens for the 'iStoragePosition' index.

In your example, because the widget is communicating sparse data, the widget is only seeing a single product that contains (non-default) data, as a result of which the 'iDay' index on the X-Axis is being used to color. Long story short, I would say the observed behavior is as intended (and not a bug).

In case you would set the display domain to 1, the widget will observe 3 products and the 'iProduct' index will again be used to color. However, this will have some less nice side-effects on the width of the bars being drawn.

We do realize that the built-in, hardcoded heuristic will probably not lead to the desired coloring in all use-cases. In case you want colors other than provided by the built-in, hardcoded heuristic described above, I would recommend, for now, to add some custom annotations.

In the combination chart we added an option that allows the app developer to explicitly specify the color-index, thereby allowing you to have more control over how the widget colors the elements in the chart. Once the color-index is extended to the bar chart widget too, you will be able to use that too.

Hope this helps!

Koos Heerink · Answer

Hi Guido,I will leave your 1st question for our PO (product owner) to answer. The answer to your last question is easy: I would not recommend to have your own ‘Mod16Ord5’ style annotation (as this might interfere with classes that the widget itself also adds to certain DOM elements). Instead, I would add a new string parameter to your model and use that as the ‘annotations identifier’Parameter pSupply { IndexDomain: (iStoragePosition,iDay,iProduct); InitialData: {  data  { ( pos-01, 2023-10-01, product1 ) : 10, ( pos-01, 2023-10-02, product1 ) : 11, ( pos-01, 2023-10-03, product1 ) : 12,   ( pos-01, 2023-10-04, product1 ) : 13, ( pos-01, 2023-10-05, product1 ) : 14 } } webui::AnnotationsIdentifier: ProductAnnotation( iProduct );}StringParameter ProductAnnotation { IndexDomain: iProduct; Definition: FormatString("custom-%e",iProduct);}This will add a class like ‘annotation-custom-product1’ to all bars in your chart, which you can then (by adding some custom CSS) use to give all bars the same color.

Sign up

Login to the community

Scanning file for viruses.

This file cannot be downloaded