How to sort in a bar chart in the WebUI

  • 14 June 2021
  • 3 replies




In the WebUI of AIMMS I created a bar chart containing based on 23 data points. However I would like to order the different bars in an ascending order. Is this possible in the WebUI? 


Next to that I have another question: in the same WebUI I have another bar chart which shows the workload of 60 different nurses. Right now each of the nurses gets a specific color, however there are three different types of nurses. So in the bar chart it would be nice if each nurse of a certain type has the same color. So, for example, all nurses from type 1 get a green color in the bar chart. Is this possible in AIMMS?


Thanks in advance! 




Best answer by mohansx 16 June 2021, 00:03

View original

3 replies

Userlevel 5
Badge +5

Hello Jelle, 


  1. Use the OrderBy attribute of the set to sort your bar chart (note that this will sort all the charts in your WebUI). Set Declaration and Attributes — AIMMS Language Reference

    For example, you have a Set_I with index i, and you are displaying data(i) in this bar chart. In the declaration of Set_I, specify -data(i) in the Order by attribute to sort the elements in a decreasing order of data(i).
  2. For coloring them based on type, I expect you to have a string parameter which specifies the type for each nurse. Say, type(i) which contains data like “type-1, type-2, type-3”

    In the declaration of Set_I, you need to specify this type(i) as the webui::AnnotationsIdentifier. See CSS Styling — AIMMS Documentation

    After that, you need to add a CSS file specifying the color for each type. See Change Widget Styles with CSS — AIMMS How-To

Dear Mohan,


First I would like to thank you for your answer! 


  1. Thank you very much for the answer, this solved my problem
  1. I indeed have a sring parameter for each nurse and I followed the steps you mentioned afterwards. However I am not able to find a CSS-file in my AIMMS folder where I could change the color of each type. Do you know what I might be doing wrong?


Thanks again!

Userlevel 5
Badge +5



You need to create that CSS file, in the MainProject//WebUI//resources folder. 


The resources folder is not present by default, so you will have to first create a folder with name “resources” and add a CSS file inside that folder. See WebUI Resources — AIMMS Documentation


The CSS file is just a text file with extension .css. Say, you can have a file “styling.css” that you can edit in text editors like Visual Studio Code or Notepad. In this file, you add the styling code as 


.annotation-”type-1” {

background: some_color;

fill: some_color;



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

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