In this step, you will create the ComparisonMicroChart on the Production Process page.
You can include information of your suppliers' delivery times to compare them. You can use the ComparisonMicroChart to visualize the comparison of several values.
You can view and download this step in the Demo Kit from the Ice Cream Machine - Step 8 - Comparison Micro Chart.
<mvc:View
...
<m:headerContainer>
<m:HeaderContainer
scrollStep="200"
scrollTime="500"
showDividers="true"
class="sapUiSmallMargin">
...
<m:FlexBox
width="16rem"
height="10rem"
alignItems="Center"
justifyContent="Center"
direction="Column">
<m:Title
text="{
parts: [
'i18n>processFlowChartsDeliveryTimeComparison',
'suppliers>/timeMeasure'
],
formatter: '.formatMessage'
}"
class="sapUiSmallMargin"/>
<m:FlexBox width="16rem" height="6rem" renderType="Bare">
<mc:ComparisonMicroChart
size="Responsive"
press=".press"
data="{suppliers>/Suppliers}">
<mc:data>
<mc:ComparisonMicroChartData
title="{suppliers>id}"
value="{suppliers>deliveryTime}"
displayValue="{suppliers>deliveryTime}"
color="{suppliers>deliveryTimeSemantics}"/>
</mc:data>
</mc:ComparisonMicroChart>
</m:FlexBox>
</m:FlexBox>
</m:HeaderContainer>
</m:headerContainer>
...
</mvc:View>
The structure that surrounds the ComparisonMicroChart is similar to the structure you used for the RadialMicroChart. The chart dimensions are inherited from FlexBox as the isResponsible property is used. The internal structure is different since the ComparisonMicroChart contains an aggregation of the ComparisonMicroChartData items. Each item is responsible for a particular line in the chart.