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 .