Skip to Content
avatar image
Former Member

How to propely bind data to VizFrame when it changes dynamically?

I have one JSON which I get by calling server. Then I have tried set oData model but it causes error in sap-ui-core.js:335 :

Uncaught(in promise)TypeError:Cannot read property'indexOf' of undefined

I tried to do it dynamically. When I hard code this json it works well. But issue occurs during changing data. I get a response with data from the server but binding is not working.

Should I try with any kind of refreshing VizFrame? (oVizFrame.vizUpdate() with data inside doesn't work).

I am using UI5 1.38 version.

Some help will be very appreciated. Thanks in advance.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Dec 21, 2017 at 04:53 PM

    Hi,

    This is complete code which I'm using to update viz chart. Please check from initial to end.

    // In View ---------------------------------
    <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
    	<viz:dataset>
    		<viz.data:FlattenedDataset data="{ChartMdl>/Chart}">
    			<viz.data:dimensions>
    				<viz.data:DimensionDefinition name="Full Year" value="{ChartMdl>Month}"/>
    			</viz.data:dimensions>
    			<viz.data:measures>
    				<viz.data:MeasureDefinition name="Sales Qty" value="{ChartMdl>SalQty}"/>
    				<viz.data:MeasureDefinition name="Forecast Qty" value="{ChartMdl>ForQty}"/>
    			</viz.data:measures>
    		</viz.data:FlattenedDataset>
    	</viz:dataset>
    	<viz:feeds>
    		<viz.feeds:FeedItem id='valueAxisFeed1' uid="valueAxis" type="Measure" values="Sales Qty"/>
    		<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Forecast Qty"/>
    		<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Full Year"/>
    	</viz:feeds>
    </viz:VizFrame>
    
    // In Controller -----------------------------------------
    // Initial binding ----------------------------------------
    _setChartData : function(){
    	Format.numericFormatter(ChartFormatter.getInstance());
            var formatPattern = ChartFormatter.DefaultPattern;
            var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");
            oVizFrame.setVizProperties({
                    plotArea: {
                        dataLabel: {
                            formatString:formatPattern.SHORTFLOAT_MFD2,
                            visible: false
                        }
                    },
                    title: {
                        visible: false,
                        text: 'Company'
                    }
            });
            var oPopOver = this.getView().byId("idPopOver");
            oPopOver.connect(oVizFrame.getVizUid());
            oPopOver.setFormatString(formatPattern.STANDARDFLOAT);
            var data = [{
            "Month": "Jan 2017",
            "SalQty": 3750,
            "ForQty": 0,
            "SalVal": 25250,
            "ForVal": 0
        },{
            "Month": "Feb 2017",
            "SalQty": 3500,
            "ForQty": 0,
            "SalVal": 24500,
            "ForVal": 0
        },{
            "Month": "Mar 2017",
            "SalQty": 3500,
            "ForQty": 0,
            "SalVal": 24500,
            "ForVal": 0
        }];
        var oJson = new sap.ui.model.json.JSONModel({"Chart" : data});
        oVizFrame.setModel(oJson, "ChartMdl");
    }
    
    // Update chart data
    updateChart : function(oEvent) {
            var data = [{
            "Month": "Jan 2017",
            "SalQty": 3750,
            "ForQty": 0,
            "SalVal": 25250,
            "ForVal": 0
            },{
            "Month": "Feb 2017",
            "SalQty": 3500,
            "ForQty": 0,
            "SalVal": 24500,
            "ForVal": 0
        },{
            "Month": "Mar 2017",
            "SalQty": 3500,
            "ForQty": 0,
            "SalVal": 24500,
            "ForVal": 0
        }];
            var oJson = new sap.ui.model.json.JSONModel({"Chart" : data});
    	oVizFrame.setModel(oJson, "ChartMdl");
    }
    
    

    THat's it!!!! This is only code I'm using. Please check.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Putting statatement inside success function doesn't work due to the fact oModel had a default value about Batch calling. So the problem was that my 4 GET methods was called in Batch and that's why my objects inside success metod of oModel.read() has a null value.

      Using method attachBatchRequestCompleted outside of oModel.read() works properly.

      oModel.attachBatchRequestCompleted(oModel, function(){
      var jsonModel = new sap.ui.model.json.JSONModel({"Chart" : oDataArr});
      oVizFrame.setModel(jsonModel, "ChartMdl");
      });

      Thank you so much for your effort @irfan.gokak, now everything works perfectly with your binding solution :)

  • Dec 26, 2017 at 07:35 AM

    Let's say you have a oDataModel like the following

    var sServiceUri = ".../abc.xsodata";
    
    var oDataModel = new sap.ui.model.odata.v2.ODataModel(sServiceUri,true,"username","password");

    you could then set it to oVizFrame like below without transfer it to JSON model beforehand.

    oVizFrame.setModel(oDataModel);

    When it comes to dataset update at runtime, there are 2 scenarios:

    1. update dataModel only if dataset remains unchanged: you could set it to vizFrame by calling setModel directly like below without using vizUpdate. This will caure a batch call to the backend for new data request.

    oVizFrame.setModel(oDataModel);

    2. update dataModel AND dataset altogether: It is suggested to destroy the feeds and dataset before bounding the new ones to vizFrame

    function updateDataset(){
      oVizFrame.destroyFeeds(); //clean up the feeds and dataset binding before update
      oVizFrame.destroyDataset(); 
      var oDataModel = new sap.ui.model.odata.v2.ODataModel(sServiceUri,true,"username","password");
      var nDataset = new sap.viz.ui5.data.FlattenedDataset({ 
        'dimensions' : [{'name' : 'City', 'value' : "{City}"}], 
        'measures' : [{'name' : 'Capital', 'value' : '{Capital}'}], 
        'data' : {'path' : "/businessData"} 
      }); 
      oVizFrame.setModel(oDataModel);
      var feeds = [
        new sap.viz.ui5.controls.common.feeds.FeedItem({'uid' : "valueAxis", 'type' : "Measure",'values' : ["Capital"]}), 
        new sap.viz.ui5.controls.common.feeds.FeedItem({'uid' : "categoryAxis",'type' : "Dimension",'values' : ["City"]})
      ]; 
      var properties = {....}; 
      oVizFrame.vizUpdate({ 
        'data' : nDataset, 
        'properties' : properties, 
        'feeds' : feeds 
      });
    } 
    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2017 at 02:36 PM

    Hi,

    After getting new data set model to Chart again and refresh the model. That's how i'm also doing.

    // data is updated data
    var oJson = new sap.ui.model.json.JSONModel({"Chart" : data}); oVizFrame.setModel(oJson, "ChartMdl"); this.getView().getModel("AllMdl").refresh();
    Add comment
    10|10000 characters needed characters exceeded