0

I've created some code to visualize an VizFrame in SAPUI5. But the app tells me that I have no data. I can't figure out why.It loads well the jason file with data but don't display anything.

My view is just like this:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.suite.ui.commons" xmlns:m="sap.m" xmlns:mc="sap.suite.ui.microchart"
    xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
    xmlns:viz.data="sap.viz.ui5.data" height="100%" controllerName="sap.suite.ui.commons.demokit.tutorial.icecream.08.controller.ProcessFlow">
    <m:Page title="{i18n>processFlowTitle}" showNavButton="true" navButtonPress=".onNavButtonPressed" backgroundDesign="Solid">
        <layout:FixFlex id='chartFixFlex' minFlexSize="250">
            <layout:flexContent>
                <viz:Popover id="idPopOver"></viz:Popover>
                <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='area'>
                    <viz:dataset>
                        <viz.data:FlattenedDataset data="{business}">
                            <viz.data:dimensions>
                                <viz.data:DimensionDefinition name="Country" value="{/business>/Country}"/>
                            </viz.data:dimensions>
                            <viz.data:measures>
                                <viz.data:MeasureDefinition name="Revenue" value="{business>/revenue}"/>
                                <viz.data:MeasureDefinition name="Profit" value="{business>/profit}"/>
                            </viz.data:measures>
                        </viz.data:FlattenedDataset>
                    </viz:dataset>
                    <viz:feeds>
                        <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Profit"/>
                        <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Country"/>
                    </viz:feeds>
                </viz:VizFrame>
            </layout:flexContent>
        </layout:FixFlex>
    </m:Page>
</mvc:View>

And My control is:

sap.ui.define([
    'sap/ui/core/mvc/Controller',
    'sap/ui/model/BindingMode',
    'sap/ui/model/json/JSONModel',
    'sap/viz/ui5/data/FlattenedDataset',
    'sap/viz/ui5/format/ChartFormatter',
    'sap/viz/ui5/api/env/Format',
    './InitPage'
], function (Controller, BindingMode, JSONModel, FlattenedDataset, ChartFormatter, Format, InitPageUtil) {
    "use strict";

    var Controller = Controller.extend("sap.viz.sample.Area.Area", {

        onInit: function (evt) {
            var oVizFrame = this.getView().byId("idVizFrame");

            var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                'dimensions': [{
                    'name': 'Country',
                    'value': "{Country}"
                }],

                'measures': [{
                    'name': 'Profit',
                    'value': '{profit}'
                },{
                    'name': 'Revenue',
                    'value': '{revenue}'
                }],
                'data': {
                    'path': "BusinessData"
                }
            });

            oVizFrame.setDataset(oDataset);
            var dataModel = new JSONModel("model/data/Business.json");

            window.alert(dataModel.getJSON());

            oVizFrame.setModel(dataModel);

            oVizFrame.setVizProperties({
                valueAxis: {
                    label: {
                        formatString: 'u'
                    }
                },
                plotArea: {
                    dataLabel: {
                        visible: true,
                        formatString: "#,##0"
                    },
                    isFixedDataPointSize: true
                },
                legend: {
                    title: {
                        visible: false
                    }
                },
                title: {
                    visible: true,
                    text: 'Lucros por País'
                }
            });
            var oPopOver = this.getView().byId("idPopOver");
            oPopOver.connect(oVizFrame.getVizUid());

        },
        onNavButtonPressed: function () {
            this.getOwnerComponent().getRouter().navTo("home");
        }
    });

    return Controller;

});
0

I managed to find a solution. The controller sets the definition of the VixFrame. Therefore the view should be just:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.suite.ui.commons" xmlns:m="sap.m" xmlns:mc="sap.suite.ui.microchart"
    xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
    xmlns:viz.data="sap.viz.ui5.data" height="100%" controllerName="sap.suite.ui.commons.demokit.tutorial.icecream.08.controller.ProcessFlow">
    <m:Page title="{i18n>processFlowTitle}" showNavButton="true" navButtonPress=".onNavButtonPressed" backgroundDesign="Solid">
        <layout:FixFlex id='chartFixFlex' minFlexSize="250">
            <layout:flexContent>
                <viz:Popover id="idPopOver"></viz:Popover>
                <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='area'>
                </viz:VizFrame>
            </layout:flexContent>
        </layout:FixFlex>
    </m:Page>
</mvc:View>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.