Skip to Content
Author's profile photo Former Member

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:


/wp-content/uploads/2016/01/waterfall_871411.png

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.

         /wp-content/uploads/2016/01/valueaxis_871418.png

  • CategoryAxis

        To set the custom title and make the label visible for Category Axis .

         category axis.png

  • PlotArea

       To set data label , dataPointStyle (for color ,style and data label based on rules defined) .

        plotArea.png

  • Legend

        To set legend for the chart.

          /wp-content/uploads/2016/01/legend_871421.png

  • Title

        To set custom title for the chart.

        /wp-content/uploads/2016/01/title_871422.png

  • Interaction

       To set the selection mode and data point display while hovering over the chart’s data point.

        /wp-content/uploads/2016/01/interaction_871423.png

  • Tooltip

        To set the tooltip for the chart.

         /wp-content/uploads/2016/01/tooltip_871424.png

Regards,

Arshi Chawla .

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri

      Nice Blog. thanks for sharing

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Chapman Wong
      Chapman Wong

      FYI that code above have chart type defined as "stacked_column" on line 26, not waterfall.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.