Fiori Elements: OVP Donut’s card
In that post, I will exclusively discuss about how to show up a donut graph in a card. Because the Dunot graph is useful and interesting when we want to visualize important data, I wanted to explain to the community how to do it.
How to create a Dunot card?
Let’s start by explaining some terminology:
- Measure: this is the numerical data which is show as a pice of donut
- Dimension : is the legend or the description of the business data
For the dunot graph, we will have to use only one measure and one dimension.
Manifest.json
The minum settings to make the dunot graph working is the following :
"com.myCompany.sd.dt.summary_card01": {
"model": "ZMY_MODEL",
"template": "sap.ovp.cards.charts.analytical",
"settings": {
"title": "{{com.myCompany.sd.dt.summary_card01_title}}",
"subTitle": "{{com.myCompany.sd.dt.summary_card01_subTitle}}",
"entitySet": "MYEntitySet",
"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#MyQualifierStat"
}
}
Annotation.xml
I will not explain how to create an annotation file for Overview Page thus what we have to do is adding the UI.Chart annotation. You should position your annotation into the MYEntitySet :
<Annotations Target="ZMYModel.MYEntitySet">
<Annotation Term="UI.Chart" Qualifier="MyQualifier">
<Record Type="UI.ChartDefinitionType">
<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut" />
<PropertyValue Property="MeasureAttributes">
<Collection>
<Record Type="UI.ChartMeasureAttributeType">
<PropertyValue Property="Measure" PropertyPath="Measure" />
<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property="DimensionAttributes">
<Collection>
<Record Type="UI.ChartDimensionAttributeType">
<PropertyValue Property="Dimension" PropertyPath="Dimension1" />
<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property="Measures">
<Collection>
<PropertyPath />
</Collection>
</PropertyValue>
<PropertyValue Property="Actions" />
<PropertyValue Property="Title" String="My Donut Chart" />
<PropertyValue Property="Dimensions">
<Collection>
<PropertyPath />
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
The data
For this example here is the data I have generated :
{
"d": {
"results": [
{
"Vbeln": "1234",
"Measure": "1E1",
"Dimension1": "Demo 1",
"Dimension2": "1E1"
},
{
"Vbeln": "1235",
"Measure": "2E1",
"Dimension1": "Demo 2",
"Dimension2": "2E1"
},
{
"Vbeln": "1236",
"Measure": "3E1",
"Dimension1": "Demo 3",
"Dimension2": "3E1"
}
]
}
}
The result
Enjoy
Thank you great help!
Hi,
Great blog,
¿Is it possible to show the values in the donut as percentages?
Thanks
Perfect, you help me a lot with this post. Thanks!