Skip to main content
The WinUI has a super obvious tab for the Legend of a linechart. But there seems to be NO way whatsoever to display the legend (or anything that will work as a legend) on a WebUI linechart.



I even tried the (seemingly obvious) solution of using a legend widget. If this will work, I can't figure out how.



Is there a way to show the legend? And if you don't have on yet, is there a workaround and do you have it in the plans in the future?
@MathFour , as of now WebUI widgets don't have an integrated legend. You have to use the Legend widget.



I suppose you have multiple identifiers in a linechart and you want to show a legend to display what line represents what quantity. For this, you will need to create a subset of AllIdentifiers, include the identifiers in your linechart in this subset and create an element parameter in this subset.



Use this element parameter as the contents of the legend widget. The example in this answer does the same.
Thanks @mohansx! I'm finally getting around to applying this. But it's not working for me.



Here are the details of my situation. Perhaps I am missing something?



Here's what I have in AIMMS Developer:



code:
Set s_WUI_LineChart_Identifiers {
	SubsetOf: AllIdentifiers;
	Parameter: e_LineChart_Identifier;
	Definition: { p_WUI_LineOne , p_WUI_LineTwo , p_WUI_LineThree };
}




Then for the linechart in webui.json, I have:



code:
"widgets/Line Chart Test": {
	"aimms.widget.type": {
		"literal": "linechart"
	},
	"contents": {
		"aimms": {
			"contents": [
				"sp_WUI_Dates",
				"p_WUI_LineOne",
				"p_WUI_LineTwo",
				"p_WUI_LineThree",
				"e_LineChart_Identifier"
			]
		}
	}
}




Then for the legend in webui.json:



code:
"widgets/linechart_test_legend": {
	"aimms.widget.type": {
		"literal": "legend"
	},
	"contents": {
		"aimms": {
			"contents": [
				"e_LineChart_Identifier"
			]
		}
	}
}




From your instructions, this is what I understand. But the colors don't match. I wonder if I have to do something special with the css. Currently I have this for line one (and similar css for the others):



code:
.tag-linechart[data-widget\.uri="Line Chart Test"] .annotation-p_WUI_LineOne {
  stroke: #ff0099;
}




Perhaps I need a similar annotation on the element parameter e_LineChart_Identifier?



Thanks!
Hi Bon, @MathFour



For the line chart, you need to use path.annotation and/or circle.annotation to apply the colors. This has been mentioned in the documentation page https://how-to.aimms.com/Articles/49/49-webui-css-color.html



code:
.tag-linechart[data-widget\.uri="Line Chart Test"] path.annotation-p_WUI_LineOne {
  stroke: #ff0099;
  background: #ff0099;
}

.tag-linechart[data-widget\.uri="Line Chart Test"] circle.annotation-p_WUI_LineOne {
  stroke: #ff0099;
  background: #ff0099;
  fill: #ff0099
}
For the line chart, you need to use path.annotation and/or circle.annotation to apply the colors. This has been mentioned in the documentation page https://how-to.aimms.com/Articles/49/49-webui-css-color.html



@mohansx, I already do that. This question has to do with the LEGEND colors. How do I get the legend colors to match the linechart colors that I have already assigned via CSS?
@MathFour



Sorry, I understand the original post wrong. For the legend colors, you need to add the annotations to your set.



code:
Set sBar2Legend {
   SubsetOf: AllIdentifiers;
   Index: iBarLegend2;
   Parameter: epBarLegend2;
   Definition: data { para1, para2 };
   Comment: "used for bar legend 2 because we changed color of para2 only in bar chart 2";
   webui::AnnotationsIdentifier: spAnnotation;
}


StringParameter spAnnotation {
   IndexDomain: iBarLegend2;
   Definition: data { para2 : "olive" };
   Comment: "The \"olive\" is whatever_you_name_it";
}
@mohansx Can you please give me the code that would associate with my example?
Ah, I think I have it, @mohansx.



Using my example, I have the identifiers of the linechart widget as p_WUI_LineOne, p_WUI_LineTwo, and p_WUI_LineThree. Each of these are colored red, blue and green, respectively.



So I need the set along with the webui::AnnotationsIdentifier as follows:

code:
Set s_WUI_LineChart_Identifiers {
	Index: i_LineChart_Identifiers;
	SubsetOf: AllIdentifiers;
	Parameter: e_LineChart_Identifier;
	Definition: { p_WUI_LineOne , p_WUI_LineTwo , p_WUI_LineThree };
	webui::AnnotationsIdentifier: sp_Linechart_Annotation;
  }




Then for the annotation I'll use in CSS, I put in AIMMS:

code:
StringParameter sp_Linechart_Annotation{
   IndexDomain: i_LineChart_Identifiers;
   Definition: data { p_WUI_LineOne : "styled_red", 
		p_WUI_LineTwo : "styled_blue", 
		p_WUI_LineThree: "styled_green" 
	};
}




And finally in CSS:

code:
.tag-linechart .annotation-styled_red {
	stroke: red;
}

.tag-linechart .annotation-styled_blue {
	stroke: blue;
}

.tag-linechart .annotation-styled_green {
	stroke: green;
}




This now gets the color block in the legend to be red next to the words "p_WUI_LineOne" to match the red line of the linechart that is associated with p_WUI_LineOne. Likewise for the blue and green lines.



Of course, the CSS attribute might not be stroke here, but when I learn what it actually is, I'll come edit this post to reflect that.
Hello Bon,



See the screenshot - I highlighted the coloring elements of the bottom color in Legend Bar Chart 2. This has annotations para2 (the default identifier name) and "olive" which was applied from webui::AnnotationsIdentifier.







The yellow color applied through below code is applied to all the legend color elements.



code:
.tag-legend-widget .color-pick {
   background: yellow;
}




So, I suppose you are trying some code like



code:
.tag-legend-widget .color-pick .annotation-p_WUI_LineOne{
   background: #ff0099
}




However, the individual coloring elements of the legend widget doesn't seem to take the identifier name or custom added annotations into account - see the pink coloring highlighted in the screenshot.



So, you either use the code which will change the color of p_WUI_LineOne to #ff0099 throughout the project (including the legend widget)



code:
.theme-aimms .annotation-p_WUI_LineOne{
    background: #ff0099
}




or, you add webui::annotationsidentifier to your legend set like below and then use



code:
Set sBar2Legend {
   SubsetOf: AllIdentifiers;
   Index: iBarLegend2;
   Parameter: epBarLegend2;
   Definition: data { para1, para2 };
   Comment: "used for bar legend 2 because we changed color of para2 only in bar chart 2";
   webui::AnnotationsIdentifier: spAnnotation;
}


StringParameter spAnnotation {
   IndexDomain: iBarLegend2;
   Definition: data { para2 : "olive" };
   Comment: "The \"olive\" is whatever_you_name_it";
}




code:
.theme-aimms .annotation-olive{
background: #ff0099
}
Wait, @mohansx, your solution does work, but it's overkill. I don't need a new set with the identifiers nor do we need a string annotation for them. I just have to call the legend widget in CSS and use the .annotation- to set the color!



code:
.tag-legend-widget .annotation-p_WUI_LineOne {
	background: red;
}
You are right, thanks. I did not try without .color-pick in the selector.

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