Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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 .

4 Comments