SAP UI5 – Creating Customized Waterfall Chart
This document explains how to use the sap.viz library to display the data in the form of Chart and how to use its properties.
Here, I have used the VizFrame stacked column chart to create a customized Waterfall Chart.
Below are the view and controller files:
View
<core:View controllerName="test.controller.viz1" xmlns:core="sap.ui.core"
xmlns="sap.m" xmlns:vtypes="sap.viz.ui5.types" xmlns:vdata="sap.viz.ui5.data"
xmlns:vizc="sap.viz.ui5.controls">
<Page id="page01" title="Viz Frame">
<vizc:VizFrame id="viz"/>
</Page>
</core:View>
Controller
sap.ui.define(["sap/ui/core/mvc/Controller"],function(Controller){
return Controller.extend("test.controller.viz1",{
onInit: function()
{
//JSON data
this.oData = [
{Parameter :"Product Revenue",profit:420,type:"Revenue"},
{Parameter :"Services Revenue",profit:210,type:"Revenue"},
{Parameter :"Variable Costs",profit:130,type:"Cost"},
{Parameter :"Fixed Cost",profit:200,type:"Cost"},
{Parameter :"Other Cost",profit:50,type:"Cost"},
{Parameter :"Other Cost",profit:250,type:"Blank"},
{Parameter :"Services Revenue",profit:420,type:"Blank"},
{Parameter :"Variable Costs",profit:500,type:"Blank"},
{Parameter :"Fixed Cost",profit:300,type:"Blank"},
{Parameter :"Total",profit:250,type:"Revenue"}
];
//Initialize Model and set data to Model
this.oModel = new sap.ui.model.json.JSONModel({
data : this.oData
});
this.viz = this.byId("viz");
this.viz.setVizType('stacked_column');
this.viz.setHeight("346px");
this.viz.setWidth("930px");
this.viz.setUiConfig({
"applicationSet": "fiori"
});
//Dataset for chart
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Parameter',
value : "{Parameter}"
},
{
axis : 2,
name : 'type',
value : "{type}"
}
],
measures : [
{
name : "Profit",
value : "{profit}"
}
],
data : {
path : "/data"
}
});
//Set the Dataset to the Chart
this.viz.setDataset(oDataset);
this.viz.setModel(this.oModel);
//All feeds for chart
var valueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "valueAxis",
'type' : "Measure",
'values' : ["Profit"]
}
), categoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "categoryAxis",
'type' : "Dimension",
'values' : ["Parameter"]
}),
color = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["type"]
});
//Adding the feeds to the the Chart
this.viz.addFeed(valueAxis);
this.viz.addFeed(categoryAxis);
this.viz.addFeed(color);
//Set Viz-Chart Properties
this.viz.setVizProperties({
//Set Properties For Value Axis(here shown as y-axis)
valueAxis:{
axisLine:{
visible:true //Show the Value Axis Line
},
title:{
visible:true,
text:"Profit" //Add custom title to Value Axis
},
label:{
visible:true
},
layout:{
maxHeight:1,
maxWidth:1
}
},
//Set Properties For Category Axis(here shown as x-axis)
categoryAxis:{
title:{
visible:true,
text:"Parameters" //Add custom title to Category Axis
},
label:{
visible:true,
style:{
fontSize:"10px"
},
}
},
//Set Properties For Plot Area
plotArea:{
dataLabel:{
visible:false
},
dataPointStyle:{ //Allows to set color,legend and data label based on rules defined.
'rules':[
{
"dataContext":{"type":{equal:"Cost"}}, //Match the dimension data "type" which has value equal to "Cost"
"properties":{
"color":"red",
"dataLabel":{
"visible":true //Shows the data label in the plot area where type is equal to "Cost"
}
},
"displayName":"Cost" //Sets the custom display name in Legend
},
{
"dataContext":{"type":{equal:"Revenue"}}, //Match the dimension data "type" which has value equal to "Revenue"
"properties":{
"color":"green",
"dataLabel":{
"visible":true //Shows the data label in the plot area where type is equal to "Revenue"
}
},
"displayName":"Revenue" //Sets the custom display name in Legend
},
{
"dataContext":{"type":{equal:"Blank"}},
"properties":{
"color":"#FFFFFF"
},
"displayName":""
}
]
}
},
//Set Legend
legend: {
title:{
visible:false //Set the legend title invisible
},
visible:true //Set the legend visible
},
//Set Title for Chart
title:{
visible:true,
text:"Company Profit" //Set custom title for the Chart
},
//Interaction
interaction:{
selectability: {
mode:"NONE" //Sets the selection mode.Here,"NONE" means no sets of data-points can be selected
},
hover:{
color:"greyscale", //Sets the color of data point hovered as grey
opacity:1, //Sets the opacity of data point hovered to completely opaque
stroke:{
visible:false //Sets the data point outline as invisible
}
}
},
tooltip:{
visible:false //Set the tooltip as invisible
}
});
}
});
});
Output:
Setting the Properties For Viz Chart:
Use the following to set the Properties for Viz Chart :
- ValueAxis
To set the custom title ,label and to make the axis line visible for Value Axis.
- CategoryAxis
To set the custom title and make the label visible for Category Axis .
- PlotArea
To set data label , dataPointStyle (for color ,style and data label based on rules defined) .
- Legend
To set legend for the chart.
- Title
To set custom title for the chart.
- Interaction
To set the selection mode and data point display while hovering over the chart’s data point.
- Tooltip
To set the tooltip for the chart.
Regards,
Arshi Chawla .
Nice Blog. thanks for sharing
Hi Arshi
Nice BLOG , but while I am using this code I am getting Blank White Box.Can u pls suggest something.
Thanks again for this nice BLOG.
Sudipta
FYI that code above have chart type defined as "stacked_column" on line 26, not waterfall.
Its because standard waterfall chart type was not available that time.So ,I have used VizFrame stacked column chart to create a customized Waterfall Chart as mentioned in the document above.