How to set legend title in SAPUI5 VizFrame for Column Chart

Question

How do I change the legend title as shown in the screenshot to something like count of all vertical bars. Ex; Total: 11

Also why does the default start y-axis value start from 500m ? How do I change it ?

CONTROLLER CODE:

    onInit: function() {

//      1.Get the id of the VizFrame
        var oVizFrame = this.getView().byId("idcolumn");

//      2.Create a JSON Model and set the data
        var oModel = new sap.ui.model.json.JSONModel();
        var data = {
        'Coaches' : [
        {"Name": "Singapore","Value": "1"},
        {"Name": "India","Value": "1"},
        {"Name": "Germany","Value": "2"},
        {"Name": "South Africa","Value": "1"},
        {"Name": "Turkey","Value": "0"},
        {"Name": "Japan","Value": "1"},
        {"Name": "China","Value": "2"},
        {"Name": "France","Value": "2"},
        {"Name": "ArgentinasdfsdfddfsdfsdAA","Value": "1"},
        ]};

        oModel.setData(data);

        this.getView().setModel(oModel);

//      3. Create Viz dataset to feed to the data to the graph
        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
        dimensions : [{ name : 'Country',value : "{Name}" }],
        measures :   [{ name : 'Total No of KFC Branches', value : '{Value}' }],
        data : { path : "/Coaches" }
        });

// Binding Model and Dataset to the Frame
        oVizFrame.setDataset(oDataset);
        oVizFrame.setModel(oModel);
        oVizFrame.setVizType('column'); // column or bar

//      4.Set Viz properties
// Ref Link: https://sapui5.netweaver.ondemand.com/docs/vizdocs/index.html#reference/chartProperty/Charts/Bar%20%20(13)/Column%20Chart/
        oVizFrame.setVizProperties({
            title:    { text : "KFC Statistics" },
            general:  { background : { border : { top : { visible : true } } } },
            general:  { background : { border : { bottom : { visible : true } } } },
            general:  { background : { border : { right : { visible : true } } } },
            general:  { background : { border : { left : { visible : true } } } },
            // valueAxis: { title : { text : "Totallll" }},
            legend:   { isScrollable : true },
            legend:   { visible : true },
            legend:   { title : { visible : true } }, 
            legend:   { title : { text : "All Measures"  } },
            plotArea: { dataLabel : { visible : true} }
        });

// Axis Specification
        var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
            'uid': "valueAxis",
            'type': "Measure",
            'values': ["Total No of KFC Branches"]
            }),

            feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                'uid': "categoryAxis",
                'type': "Dimension",
                'values': ["Country"]
                });`enter code here`

// Addition of Axis to Frame
        oVizFrame.addFeed(feedValueAxis);
        oVizFrame.addFeed(feedCategoryAxis);        

    }

A.vH A.vH · Accepted Answer · 2017-02-16T09:48:54

What version of SAPUI5 are you using? I am using 1.44.5 and your example looks nice (see screenshot)

And you can change the values on the y-axis by adding

yAxis: { scale: { fixedRange: true, minValue: 0, maxValue: 3 }}

to oVizFrame.setVizProperties.

Your other problem is more bit complicated since there is no easy way to get the "Sum of Values".

You have to calculate the total before displaying

    //      3. Create Viz dataset to feed to the data to the graph
    var coaches = oModel.getProperty("/Coaches");
    var ttl = 0;
    for (var i = 0; i < coaches.length; i++) {
        ttl +=  parseInt(coaches[i].Value);
    }
    var total = "Total " + ttl;

    var oDataset = new FlattenedDataset({
        dimensions: [{
            name: 'Country',
            value: "{Name}"
        }],
        measures: [{
            name: total,
            value: '{Value}'
        }],
        data: {
            path: "/Coaches"
        }
    });

and

// Axis Specification
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
    'uid': "valueAxis",
    'type': "Measure",
    'values': [total]
}),

How to set legend title in SAPUI5 VizFrame for Column Chart

1 Answers