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?
Page 1 / 1
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;
}
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:
Then for the annotation I'll use in CSS, I put in AIMMS:
And finally in CSS:
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.
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.
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:
Then for the linechart in webui.json, I have:
Then for the legend in webui.json:
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):
Perhaps I need a similar annotation on the element parameter e_LineChart_Identifier?
Thanks!
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
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
}
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";
}
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.
So, I suppose you are trying some code like
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)
or, you add webui::annotationsidentifier to your legend set like below and then use
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
}
You are right, thanks. I did not try without .color-pick in the selector.
Reply
Sign up
Already have an account? Login
Please use your business or academic e-mail address to register
Login to the community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.