The sap.viz charting library provides a set of flexible chart controls that allow to easily

representing business data in a feature rich, graphical manner.

Quick Coding to get a BAR Chart

(Probably most of you know how to build a basic chart. Do not worry this is just starting.

Something more is waiting for you. 🙂 )

var oModel = new sap.ui.model.xml.XMLModel(); 

            

oModel.loadData(“/XMII/Illuminator?QueryTemplate=……

var oDataset = new sap.viz.ui5.data.FlattenedDataset();

var DimensionList = new    sap.viz.ui5.data.DimensionDefinition(); (Y Axis)

DimensionList.setAxis(1);

DimensionList.setName(“Plot”);

DimensionList.bindProperty(“value”,”YTDLabel”);

oDataset.addDimension(DimensionList);

var MeasureListActual = new sap.viz.ui5.data.MeasureDefinition();(X Axis)

MeasureListActual.setName(“Actual”);

MeasureListActual.bindProperty(“value”,”YTD”);

oDataset.addMeasure(MeasureListActual);

var MeasureListPlan = new sap.viz.ui5.data.MeasureDefinition();(X Axis)

MeasureListPlan.setName(“Plan”);

MeasureListPlan.bindProperty(“value”,”YTDPlanned”);

oDataset.addMeasure(MeasureListPlan);

oDataset.bindData(“/Rowset/Row/”);

var oChartCompare = new sap.viz.ui5.Bar

({

                           id : “ChartCompare”,

                           width :”310px”,

                           height : “100px”,

                          dataset : oDataset

});

  oChartCompare.setModel(oModel);

XML structure

<Rowset>

<Columns>…</Columns>

<Row>

<YTDLabel>YTD</YTDLabel>

<YTD>89966</YTD>

<YTDPlanned>440320</YTDPlanned>

</Row>

</Rowset>





We get Simple meaning less Bar Chart from above code 😕

/wp-content/uploads/2014/07/2_509605.png

  • I will add X axis.

/wp-content/uploads/2014/07/3_510555.png

var XAxis = oChartCompare.getXAxis();

XAxis.setVisible(true);


  • Also Y Axis

var YAxis = oChartCompare.getYAxis();

YAxis.setVisible(true);

/wp-content/uploads/2014/07/4_510554.png

  • “We don’t understand the meaning of green & blue color without legend” 😡

/wp-content/uploads/2014/07/5_510544.png


var ProdLegendYTD = 

                         oChartCompare.getLegend();

ProdLegendYTD.setVisible(true);


  • Can you give me a tooltip please ?


var ProdTooltipYTD =

                   oChartCompare.getToolTip();

ProdTooltipYTD.setVisible(true);

/wp-content/uploads/2014/07/6_510542.png

  1. But  /wp-content/uploads/2014/07/index_510734.png(My mind wants more) “3D round corner bar”

/wp-content/uploads/2014/07/15_510567.png

…………

height : “100px”,

plotArea:{                                                                   

drawingEffect:  

sap.viz.ui5.types.Bar_drawingEffect.glossy,

isRoundCorner:true,                                  

colorPalette:[color1,color2]

},

dataset : oDataset

…………

  • My charts are not C/wp-content/uploads/2014/07/12_510501.pngL/wp-content/uploads/2014/07/12_510501.pngRFUL

var color1 = “#EAC117”;

var color2 = “#38ACEC”;

var color3 = “#838B83”;

var color4 = “#728C00”;

…………

height : “100px”,

plotArea:{                                                                                        

              drawingEffect: sap.viz.ui5.types.

Bar_drawingEffect.glossy,           isRoundCorner:true,                                            

colorPalette:[color1,color2]

               },

dataset : oDataset

…………

/wp-content/uploads/2014/07/14_510530.png

  • Please show me value on the top of bar, please….

/wp-content/uploads/2014/07/10_510572.png


plotArea:{

             …………………………..

},

dataLabel:

                {

                   visible:true,

                   positionPreference : true,

                   position : sap.viz.ui5.types. 

                   Datalabel_position.outside,

                 },

dataset : oDataset

  …………………………..


  • Last one -comma separated value for better visibility

…………………………..

dataLabel:

                {

………………………

                     position : sap.viz.ui5.types.

                     Datalabel_position.outside,

                     formatString : [[“##,0”],[“en-US”]]

                 },

dataset : oDataset

  …………………………..

/wp-content/uploads/2014/07/11_510573.png

All these very beautiful and useful features of Viz chart are the overnight reinvention/research by My KOLKATA SAP MII Team. Thanks to all of them, especially thanks to Ushinar Basu, Arnab Singha, Sushabhan Banerjee, Pratibha Singh & Sucharit Dutta.


Thanks Som Sarkar and Animesh Mondal for their guidance, where we get stuck.


Thanks Sudipta Mukherjee for his great ideas & guidance on charts to impress our client at first sight.


Thanks Dipankar Saha for always inspiring me to write this kind of blog. Hope this will help everyone.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. John Omesili

    Thnaks for the Tutorial, have any solutions to changing the default postion of the X and Y axis , by setting a value for thier position for instance in Highcharts I could do this

    yAxis: {

         plotLines: [{

             color: ‘#000000’,

                     width: 1,

                     value: 5

                 }],

             labels: {

      enabled: false

      },

    and achieve thisCapture.PNG

    Thanks for the suggestions

    (0) 
  2. John Omesili

    Hi is it possible to ever build a Bubble chart with the code below, What could I be missing

    sap.ui.jsview(“views.BubbleCoy”, { 

              /** Specifies the Controller belonging to this View.

              * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

              * @memberOf views.Bubble

              */ 

              getControllerName : function() { 

                        return null; 

              }, 

              /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

              * Since the Controller is given to this method, its event handlers can be attached right away.

              * @memberOf views.Companies

              */ 

              createContent : function(oController) {

            

              

                        var mainCoyBubbleChart = new sap.viz.ui5.types.Bubble(“mainCoyBubbleChart”, {  

                                  width : “100%”, 

                                  height : “50%”, 

                                  line : {

                              //’colorPalette’ : d3.scale.category20().range()

                              },

     

                                  title : { 

                                            visible : true, 

                                            text : ‘Copmpany Aggregation’  

                                  },

                                 

                                  xAxis: { 

                                      //title: { visible: true, text : “Friend Aggregation” },

                                      //scale: new sap.viz.ui5.types.Axis_scale({fixedRange:true, Value: 5, minValue: 0, maxValue: 12})

                              },

                                   

                                  dataset : topSalesDataset = new sap.viz.ui5.data.FlattenedDataset({ 

                                            // a Bar Chart requires exactly one dimension (x-axis) 

                                            dimensions : [ { 

                                                      axis : 1, // must be one for the x-axis, 2 for y-axis 

                                                      name : ‘Company’, 

                                                      value : “{Name}” 

                                            }], 

                                            // it can show multiple measures, each results in a new set of bars 

                                            // in a new color 

                                            measures : [  

                                             

                                            { 

                                                group:1, 

                                        name : ‘Business Value’, // ‘name’ is used as label in the Legend 

                                                  value : ‘{BusinessValue}’ // ‘value’ defines the binding for the 

                                        },

                                            { 

                                            group:2,

                                            name : ‘Friend Value’, // ‘name’ is used as label in the Legend 

                                                      value : ‘{friendValue}’ // ‘value’ defines the binding for the 

                                            } 

                                            ], 

                                            // ‘data’ is used to bind the whole data collection that is to be 

                                            // displayed in the chart 

                                            data : { 

                                                      path : “/” 

                                            }

                                 

                                  }) 

                        });

    //                    var YAxis = mainBubbleChart.getYAxis();

    //          YAxis.setVisible(true);

                      

     

                        return mainCoyBubbleChart; 

    }); 

    (0) 
  3. Michael Appleby

    Manali,

    Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

    NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

    Thanks, Mike (Moderator)

    SAP Technology RIG

    (0) 
  4. Sourabh Kumar

    First of all awesome work ,
    I am facing one issue if anyone can help, I need to display a data like “Ashburn/Orchestrator1/blahblah”…..But when i try to set is not coming complete and shows “…” below the graph axis Y.
    Can someone help me with this, i dont wanna use CSS just for one step, and i am unable to find any property or code related to it

    (0) 

Leave a Reply