Solved

Case comparison - coloring barcharts

  • 1 November 2019
  • 3 replies
  • 145 views
Boglarka Balogh
Rank
Userlevel 1
Badge

Hello All!

 

I’ve created some pages to help analizing different cases. To support this I made charts too. When I load in the cases, the colors are always similar(light purpule and purple, light green and green). My first idea was that I use “KPI” annotation for the parmeters in the active case, then I realized that we are working with runtime parameters which has other indexes. Do you have any idea? 

 

While I was trying to color charts, I set up a default color for the widget, it works well:

.aimms-widget[data-widget\.uri="GlobalKPICompariosn_barchart1"] .bar{
	fill: rgb(192, 90, 90);
}

 

Then I wanted to use the same with annotation: No reaction. 

.aimms-widget[data-widget\.uri="GlobalKPICompariosn_barchart1"] .bar .annotation-KPI{
	fill: rgb(84, 183, 203);
}

 I tried some css from the ‘How to’ too with my annotation. 

 

Thanks for your help! 

 

Bogi

icon

Best answer by laithshadeed 6 November 2019, 17:24

View original
BAB from Optasoft

3 replies

L
Userlevel 1
Badge

Hi @Boglarka Balogh . Thank you for using WebUI. Getting CSS right can be tricky. Can you share a simple example model with screenshots to help me understand better what you are trying to achieve? Maybe I can help.

Boglarka Balogh
Rank
Userlevel 1
Badge

Hi @laithshadeed !

My problem is the following:

When I turn on compare case function sometimes I see my chart with similar colors like this.

 

 

But for example yesterday I found this:

The last version is better for analisis, but I don’t know why they aren’t the same everytime, and what causes the change. 

 

I wanted to write a css for this, but I realized that here we use runtime identifiers.

How can I fix the colors of the charts?

BAB from Optasoft
L
Userlevel 1
Badge

Thank you for sharing screenshots.

The colours of bar charts follow modular arithmetic to rotate. For example in the attached model, I have 50 bar,  each bar will get a mix for there CSS classes annotation-Ord1 annotation-Mod7Ord1 annotation-Mod11Ord1 annotation-Mod19Ord1


Those CSS classes will rotate using modular arithmetic like this:

  • annotation-Ord1, annotation-Ord2, ..., annotation-Ord50, ...
  • annotation-Mod7Ord1, annotation-Mod7Ord2, ..., annotation-Mod7Ord7, annotation-Mod7Ord1, ...
  • annotation-Mod11Ord1, annotation-Mod11Ord2, ..., annotation-Mod11Ord11, annotation-Mod11Ord1, ...
  • annotation-Mod19Ord1, annotation-Mod19Ord2, ...., annotation-Mod19Ord19, annotation-Mod19Ord1, ...


For example, bar with id=bar-1300 (14th bar) will get the follow CSS classes:

  • annotation-Ord14
  • annotation-Mod7Ord7 (14 mod 7)
  • annotation-Mod11Ord3 (14 mod 11)
  • annotation-Mod19Ord14 (14 mod 19)

Here screenshot of Chrome DevTools:

 

 

 

Using such classes, you can generate your CSS overrides to change the colours in any way you like.

However, I found it strange why different days showed you different colours, could you attach a small model with a reproducible case to help me debug it? Maybe you found a bug :)

 

1 Attachment

Reply


Terms & Conditions

Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator