How to change display names of values in legend of viz chart

[Former Member]

Hi,

I work with an OData service, which offers cryptic names for values and the legend automatically takes these to fill itself. How can I change the names shown in the legend, and when we are it, when I click on a date in the chart?

Here a screen of my graph:

I want to change "Erdat" to "Date" and "SumMm" to "Documents", as well as "RateMmPosted" to "Rate".

This code, that I took from an explored app example, does not work as I thought it would.

		vizFrame.setVizProperties({
			title: {
		visible: true,
		text: title
		},
		legend: {

                visible: true

            },

            plotArea: {

                dataPointStyle: {

                    "rules": [{

                        "dataContext": ["RateMmPosted"],

                        "displayName": "Rate"

                    },

                    {

                        "dataContext": ["SumMm"],

                        "displayName": "Documents"

                    },

                    {

                        "dataContext": ["Erdat"],

                        "displayName": "Date"

                    }]

                }

            },

			valueAxis: {
				title: {
					text: this.bundle.getText("yAxisLabel"),
				}
			},
			categoryAxis: {
				title: {
					text: this.bundle.getText("Date")
				}
			}
		});

And is it possible to move the legend somewhere else?

Kind regards,

Michael

[saivellanki · Accepted solution]

Hi Michael,

You can change the legend names. Since, you have been referring to UI5 explored sample, I have done few changes to the code.

Check this -

JS Bin - Collaborative JavaScript Debugging

Now as per the above example, the model has Revenue, Item Category and City. While displaying it on UI, the names have been changed to

Revenue --> Profit

Item Category --> Category Item

City --> Place.

You have ability to change legend positions as well, just inject the following code to change the position to bottom in your vizProperties --> legendGroup

Different positions are available - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.viz.ui5.types.Legend_layou...

legendGroup :new sap.viz.ui5.types.Legend({layout:new sap.viz.ui5.types.Legend_layout({position :sap.viz.ui5.types.legend.Common_position.bottom}) })

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Thank you for your help.

I have one question left, where would you use the legendgroup in the vizproperties? I tried a couple of things but all examples I could find use the legend position not together with the vizframe.

FYI: I'm using XML Views, which won't allow me to set the legend directly in the view code.

[Former Member · Accepted solution]

Logging the vizFrame object helped to find all possible vizProperties that exist.

Here the settings to show the legend at the bottom and remove the automatically created title:

  vizFrame.setVizProperties({

     title: {

         visible: true,

         text: title

     },

     legend: {

         visible: true,

         title: {

             visible: false

         }

     },

     legendGroup: {

         layout: {

             position: "bottom"

         }

     },

[flotxi]

For me following code worked.

The problem ist that this way it's not translateable but moving the texts to the i18n Model ruined the app.

<viz:VizFrame uiConfig="{applicationSet:'fiori'}" vizType="100_stacked_column" width= "100%">
	<viz:dataset>
	    <viz.data:FlattenedDataset data="{toEvaluationSet}">
	        <viz.data:dimensions>
	            <viz.data:DimensionDefinition name="CalendarDay" value="{ parts : [ {path: 'CalendarDay'}], formatter: '.formatter.timeStampToDate' }" />
	        </viz.data:dimensions>
	        <viz.data:measures>
	            <viz.data:MeasureDefinition name="Description 1 (even with special characters)" value="{DaysPosted}" />
	            <viz.data:MeasureDefinition name="Description 2" value="{DaysPlanned}" />
	        </viz.data:measures>
	    </viz.data:FlattenedDataset>
	</viz:dataset>
	<viz:feeds>
	    <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="CalendarDay" />
	    <viz.feeds:FeedItem uid="valueAxis"    type="Measure" values="Description 1 (even with special characters), Description 2" />
	</viz:feeds>
</viz:VizFrame>

[fuchss65]

Hi Michael,

I have the same problem and want to use different display names in the legend.

But I somehow cannot access the JsBin example.

Can you give me any help please?

Best regards,

Stefan.

[fuchss65]

OK, I got it working 🙂

[saivellanki]

Sorry Stefan!

I guess unknowingly I have erased the code in JSBin. However, good thing is you got it working.

Regards,

Sai Vellanki.

[Former Member]

Hi Sai,

I am facing the same issue, can you please post that code back.

Thanks

-

Rohit

[fuchss65]

Hi Rohit, what you just have to do is something like this:

var elem = [];
<loop over your KPIs> {
   
  var measure = new sap.viz.ui5.data.MeasureDefinition();
  var n = <original name>;
  var displayName = <new name>;
  elem.push(displayName);
  measure.setName(displayName);
  measure.bindProperty("value", n);
  oDataset.addMeasure(measure);
}
//set feeds
var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
 'uid' : "primaryValues", 
'type' : "Measure", 
'values' : elem }
 

[Former Member]

Pushing my question again. Any ideas?