In-cell Data Bars in WebUI tables

Dear @tjokes1 

We recently released a new feature in AIMMS that allows you to include html into table cells:

https://documentation.aimms.com/webui/widget-options.html#webui-ishtml

With this you can generate html code to make the same bars as you are showing in your screenshots.

Here is an example:

To achieve this I did the following:

1. Created a string parameter to hold the html with the necessary indexes
2. Add the html code that I wanted to use. In this case, I used this:

StringParameter sp_barChart {
	IndexDomain: (i_index1,i_index2);
	Definition: {
		if p_productionValues(i_index1,i_index2) then
		    formatString("
                    <div class=\"container%s\">
		            <div class=\"bar%s\"></div>
		            <div class=\"label%s\">%n%%</div>
		        </div>

		        <style>
		            .container%s {
		                width: 60px;
		                height: 20px;
		                background-color: white;
		                border: 1px solid #000;
		                position: relative;
		            }

		            .bar%s {
		                width: %n%%;
		                height: 100%%;
		                background-color: green;
		                position: absolute;
		                top: 0;
		                left: 0;
		            }

		            .label%s {
		                position: absolute;
		                top: 50%%;
		                left: 50%%;
		                transform: translate(-50%%, -50%%);
		                font-family: Arial, sans-serif;
		                font-size: 16px;
		                color: black;
		            }
		        </style>",
		        (i_index1 + "" + i_index2),
		        (i_index1 + "" + i_index2),
		        (i_index1 + "" + i_index2),

  round(p_productionValues(i_index1,i_index2)/$p_max_p_productionValues*100,0),
		        (i_index1 + "" +  i_index2),
		        (i_index1+ "" + i_index2),

   round(p_productionValues(i_index1,i_index2)/$p_max_p_productionValues*100,0),
		        (i_index1+ "" + i_index2)
		        )
		endif;
	}
	webui::IsHtml: True;
}

If I am honest my code is messy and not very nice, but I hope it illustrates the idea.

You can/should move the css to somewhere else, but to keep it simple, I left in the html.

With this new HTML feature, you can do a lot of modifications and create complex, meaningful interfaces.

Hope it helps.