SAPUI5 VizFrame turn 90° to the left (horizontal instead of vertical)

Question

I am using a VizFrame, is it possible to turn the graphic/chart 90° to the left or to the right, means horizontal alignment instead of vertical?

    var chartPopover = new sap.viz.ui5.controls.Popover({});

    var oModel = new sap.ui.model.json.JSONModel({
        'businessData' : [
            {
                "Country" : "China",
                "Profit" : 100,
                "Forcast" : 200,
                "Target" : 20,
                "Revenue" : 20,
                "Revenue2" : 20,
                "Revenue3" : 512
            }, {
                "Country" : "Japan",
                "Profit" : 159,
                "Forcast" : 140,
                "Target" : 150,
                "Revenue" : 30,
                "Revenue2" : 100,
                "Revenue3" : 303
            }, {
                "Country" : "India",
                "Profit" : 129,
                "Forcast" : 120,
                "Target" : 100,
                "Revenue" : 200,
                "Revenue2" : 222,
                "Revenue3" : 263
            }, {
                "Country" : "France",
                "Profit" : 58,
                "Forcast" : 60,
                "Target" : 80,
                "Revenue" : 116,
                "Revenue2" : 152,
                "Revenue3" : 113
            }, {
                "Country" : "Austrilia",
                "Profit" : 149,
                "Forcast" : 120,
                "Target" : 150,
                "Revenue" : 249,
                "Revenue2" : 292,
                "Revenue3" : 443
            }, {
                "Country" : "Sweden",
                "Profit" : 49,
                "Forcast" : 60,
                "Target" : 55,
                "Revenue" : 1449,
                "Revenue2" : 242,
                "Revenue3" : 243
            }
        ]
    });

    var oDataset = new sap.viz.ui5.data.FlattenedDataset({
        'dimensions' : [
            {
                name : 'Country',
                value : "{Country}"
            }
        ],
        measures : [
            {
                name : 'Profit',
                value : '{Profit}'
            }, {
                name : 'Target',
                value : '{Target}'
            }, {
                name : "Forcast",
                value : "{Forcast}"
            }, {
                name : "Revenue",
                value : "{Revenue}"
            }, {
                name : 'Revenue2',
                value : '{Revenue2}'
            }, {
                name : "Revenue3",
                value : "{Revenue3}"
            }
        ],
        'data' : {
            'path' : "/businessData"
        }
    });

    var oVizFrame = new sap.viz.ui5.controls.VizFrame("vizFrame", {
        'uiConfig' : {
            'applicationSet' : 'fiori'
        },
        'vizType' : 'bullet'
    });

    oVizFrame.setVizProperties({
        plotArea : {
            colorPalette : [
                'sapUiChartPaletteSemanticNeutral'
            ],
            gap : {
                visible : true
            }
        },

        legend : {
            title : {
                visible : false
            }
        },

        title : {
            visible : true,
            text : 'Bullet (with gap enabled)'
        }
    });

    oVizFrame.setDataset(oDataset);
    oVizFrame.setModel(oModel);

    var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "primaryValues",
        'type' : "Measure",
        'values' : [
            "Profit"
        ]
    }), feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "axisLabels",
        'type' : "Dimension",
        'values' : [
            "Country"
        ]
    }), feedTargetValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "targetValues",
        'type' : "Measure",
        'values' : [
            "Target"
        ]
    });

    oVizFrame.addFeed(feedPrimaryValues);
    oVizFrame.addFeed(feedAxisLabels);
    oVizFrame.addFeed(feedTargetValues);

    oVizFrame.attachSelectData(function(event) {
        var data = event.getParameter('data');
        for ( var i = 0; i < data.length; i++) {
            console.log(oDataset.findContext(data[i].data))
        }
    });

    var chartPopover = new sap.viz.ui5.controls.Popover({});
    chartPopover.connect(oVizFrame.getVizUid());

I already tried:

var oVizFrame = sap.ui.getCore().byId("vizFrame");

var properties = { 
        'direction' : 'vertical', // also horizontal
     };

oVizFrame.vizUpdate({ 
     'properties' : properties, 
 }); 

but without result - any help appreciated!

By the way, yes I can use rotate CSS but I do not want to because its some kind of "hack" and I need a stable chart with no DOM injections.. thanks.

Thanks, zY

Answer 1

I'm not sure if you still need help with it, but you should change the type of the chart from "bullet" to "vertical_bullet" when defining the chart, somehow like this:

new sap.viz.ui5.controls.VizFrame({
   ...
   vizType : "vertical_bullet",
   ...
})

Which should do the job. In case, you want to do it on the fly, then just call the

   oVizFrame.setVizType("vertical_bullet");

function.

Best Regards, Dark