Fiori Elements - Overview Page: semantic colors in column chart

[former_member321811]

Hi,

I'd like to use semantic colors in my bar chart using the Criticality or CriticalityCalculation annotation. However everything is in black when I try to do it:

Does anyone know how to achieve this?

Cheers,

Pierre

[former_member321811]

prasita.prabhakaran could you please post a working example on SCN or maybe push it to your GitHub? I can't make it work and I can't see what's wrong with my setup.

Thanks,

Pierre

[former_member103161]

Hello Pierre,

I have uploaded a sample project here

Please check if the dimension that contains the semantic colour codes is given the role "Series"

Regards,

Prasita

[former_member321811]

Hi prasita.prabhakaran ,

Thanks for the sample, when I use the role "Series", I get some colors in my chart. This is not exactly what I want to achieve (i.e I want one bar per month) but I believe I'll find a way to configure my chart with your example.

Cheers,

Pierre

[former_member103161]

Yes this needs to be inside the card-->settings

[former_member727480]

prasita.prabhakaran :

I have define threshold values in column chart. Bars are coming in black but color legends are showing as expected.

Please help.

[former_member321811]

prasita.prabhakaran : the values returned by the backend are the same I use for Criticality elsewhere (i.e 0, 1, 2, ,3) as defined here: https://wiki.scn.sap.com/wiki/display/EmTech/OData+4.0+Vocabularies+-+SAP+UI#CriticalityType

<Property Name="rateCriticality" Type="Edm.Int32"/>

...

<Annotation Term="UI.DataPoint" Qualifier="AverageRate">
    <Record Type="UI.DataPointType">
        <PropertyValue Property="Title" String="{@i18n>AVERAGE_RATE}"/>
	<PropertyValue Property="Value" Path="averageRate"/>
	<PropertyValue Property="Criticality" Path="rateCriticality"/>
    </Record>
</Annotation>

I've added the colorPalette object (not an array so the documentation is wrong) but I still have black bars in my chart.

[former_member103161]

The object usage is starting 1.61, array was the case till 1.60.

[former_member103161]

Please use the sample below for reference

"colorPalette" : {

    "0": {
    "color": "sapUiChartPaletteSemanticNeutral",
    "legendText" : "{{OTHERS}}"},
    "1": {
    "color": "sapUiChartPaletteSemanticBadDark1",
    "legendText" : "{{BAD}}"},
    "2": {
    "color": "sapUiChartPaletteSemanticCriticalDark2",
    "legendText" : "{{CRITICAL}}"},
    "3" : {
    "color": "sapUiChartPaletteSemanticCritical",
    "legendText" : "{{GOOD}}"}
}

[former_member321811]

Hi prasita.prabhakaran : where should I put the colorPalette object? In the card definition in the manifest? Here's the chart I get with CriticalityCalculation instead of Criticality:

And here's my card definition (UI5 1.62.1)

"card01": {
    "model": "default",
    "template": "sap.ovp.cards.charts.analytical",
    "settings": {
	"title": "{{card01_title}}",
	"subTitle": "{{card01_subTitle}}",
	"entitySet": "StaffingAvgByMonthLastYear",
	"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant",
	"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#Column",
	"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant",
	"selectionPresentationAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant",
	"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#Header",
	"defaultSpan": {
	    "cols": 2
	}
    },
    "colorPalette": {
        "0": {
	    "color": "sapUiChartPaletteSemanticNeutral",
	    "legendText": "{{OTHERS}}"
	},
	"1": {
	    "color": "sapUiChartPaletteSemanticBadDark1",
	    "legendText": "{{BAD}}"
	},
	"2": {
	    "color": "sapUiChartPaletteSemanticCriticalDark2",
	    "legendText": "{{CRITICAL}}"
	},
	"3": {
	    "color": "sapUiChartPaletteSemanticCritical",
	    "legendText": "{{GOOD}}"
	}
    }
}

[former_member265660]

Hello Prasita,

I have a similar requirement but instead i want to display different colors in Visual Filter Chart.

kindly suggest your view

regards,

Urvish

[former_member321811]

Hi,

I tried with SAPUI5 1.60, 1.61 and 1.62.

prasita.prabhakaran : I've seen this part of the documentation but a working example would be nice. I've added a color palette to my manifest but I don't where I should put it (at the card level?) and what values I should specify (i.e colors using hex format or predefined css names?):

"card01": {
    "model": "default",
    "template": "sap.ovp.cards.charts.analytical",
    "settings": {
	"title": "{{card01_title}}",
	"subTitle": "{{card01_subTitle}}",
	"entitySet": "StaffingAvgByMonthLastYear",
	"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant",
	"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#Column",
	"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant",
	"selectionPresentationAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant",
	"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
	"defaultSpan": {
	    "cols": 2
	},
	"colorPalette": [{
	    "color": "#BB0000",
	    "legendText": "legend 1"
	}, {
	    "color": "#E78C07",
	    "legendText": "legend 2"
	}, {
	    "color": "#2B7D2B",
	    "legendText": "legend 3"
	}, {
	    "color": "#5E696E",
	    "legendText": "legend 4"
	}]
    }

[former_member103161]

Hello Pierre,

Which SAPUI5 version are you using. Please share the manifest snippet as well. Look for colorPalette in this document.

Regards,

Prasita

[former_member103161]

What are the criticality values returned by the backend?

[leonardofreitas]

Hi

Pierre Dominique l hope you are well.

Check if the procedures you are following is supported by your current SAPUI5.

Also the guideline below may help you about this specific requirement of yours.

https://experience.sap.com/fiori-design-web/how-to-use-semantic-colors/

Att,

Leonardo de Freitas