Skip to main content
Solved

How can I show the legend on a WebUI linechart?

MathFour
AIMMS Partner
Forum|alt.badge.img
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?

Best answer by MathFour

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;
}
View original
~Bon Crowder, Data Scientist

mohansx
Forum|alt.badge.img+5
  • mohansx
  • Former AIMMSian
  • June 8, 2019
@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.
Mohan
MathFour
AIMMS Partner
Forum|alt.badge.img
  • MathFour
  • AIMMS Partner
  • July 9, 2019
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!
~Bon Crowder, Data Scientist
mohansx
Forum|alt.badge.img+5
  • mohansx
  • Former AIMMSian
  • July 10, 2019
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
}
Mohan
MathFour
AIMMS Partner
Forum|alt.badge.img
  • MathFour
  • AIMMS Partner
  • July 10, 2019
mohansx wrote:
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?
~Bon Crowder, Data Scientist
mohansx
Forum|alt.badge.img+5
  • mohansx
  • Former AIMMSian
  • July 11, 2019
@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";
}
Mohan
MathFour
AIMMS Partner
Forum|alt.badge.img
  • MathFour
  • AIMMS Partner
  • July 12, 2019
@mohansx Can you please give me the code that would associate with my example?
~Bon Crowder, Data Scientist
MathFour
AIMMS Partner
Forum|alt.badge.img
  • MathFour
  • AIMMS Partner
  • July 12, 2019
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.
~Bon Crowder, Data Scientist
mohansx
1 person likes this
  • mohansx
    mohansx
mohansx
Forum|alt.badge.img+5
  • mohansx
  • Former AIMMSian
  • July 12, 2019
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
}
Mohan
MathFour
AIMMS Partner
Forum|alt.badge.img
  • MathFour
  • AIMMS Partner
  • July 12, 2019
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;
}
~Bon Crowder, Data Scientist
mohansx
Andrew
2 people like this
  • mohansx
    mohansx
  • Andrew
    Andrew
mohansx
Forum|alt.badge.img+5
  • mohansx
  • Former AIMMSian
  • July 12, 2019
You are right, thanks. I did not try without .color-pick in the selector.
Mohan

Reply


Terms & Conditions