0

I've defined a line chart in SAPUI5. It works properly when I place it at an DIV in my HTML.

    var oChart = new sap.viz.ui5.Line({
        dataset : oDataset,
        yAxis : yAxis,
        title : {
            visible : true,
            text : 'Trend Chart'
        },
        legend : {
            visible : true,
        },

    });

oChart.setModel(oModel2);
oChart.placeAt("visual");

My Goal is to place it in an popup/dialog/messagebox whatever pops up and is able to contain the graph. I tried to define an dialog and place this graph on it, didnt work (propably wrong sytanx). then I tried to define an view and place it at the dialog, also didnt work. Can somebody help me how to place the chart in a dialog/popup with a little code snippet, it seems that I am not able to do it. Thanks!

ANSWERED: invalidate() is the key (due to the fact, that jsbin code does not rest forever, I want to share the answer)

$(function() {
  var oDataset = new sap.viz.ui5.data.FlattenedDataset({    
    dimensions : [     
      {axis : 1,name : 'Country',value : "{Country}"}     
    ],    
    measures : [     
      {name : 'Profit',value : '{profit}'},    
      {name : 'Revenue',value : '{revenue}'}     
    ],    
    data : {path : "/businessData"}    
  });  

  var legendPosition = new sap.viz.ui5.types.Legend({layout: {  
    position: "left"  
  }});   

  var stackedColumnVizChart = new sap.viz.ui5.StackedColumn("chartStackedColumn", {  
    width : "800px",  
    height : "500px",  
    title : {  },  
    dataset : oDataset,  
    legendGroup: legendPosition  
  });  
  stackedColumnVizChart.setModel(sap.ui.getCore().getModel());  

  var oModel = new sap.ui.model.json.JSONModel({    
    businessData : [    
      {Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},    
      {Country :"China",revenue:338.29,profit:133.82, population:1339724852},    
      {Country :"France",revenue:487.66,profit:348.76, population:65350000},    
      {Country :"Germany",revenue:470.23,profit:217.29, population:81799600},    
      {Country :"India",revenue:170.93,profit:117.00, population:1210193422},    
      {Country :"United States",revenue:905.08,profit:609.16, population:313490000}    
    ]                
  });    

  stackedColumnVizChart.setModel(oModel);


  var dlg = new sap.m.Dialog({
    title: 'Text',
    width : "800px",  
    height : "600px",  
    content : [stackedColumnVizChart]
  });

  (new sap.m.Button({
    text: 'open',
    press: function() {
      dlg.open();
      stackedColumnVizChart.invalidate();
    }
  })).placeAt('content');
});
1
  • Can you post the code you tried?
    – qmacro
    Aug 26, 2014 at 17:03

1 Answer 1

2

We have some similar experience too. It appears that the chart does not render itself. Here is an example http://jsbin.com/gaveq/1/edit

you can see that I need to call invalidate function to get the chart to render.

-D

5
  • unfortunately I dont get your code running :( its still empty. I replaced mobile dialog and button with ui.commons button, but still the dialog is empty. I placed it in main view, where do you call your code? thanks so far!
    – dotchuZ
    Aug 26, 2014 at 20:34
  • 1
    hi zyrex, see jsbin.com/seyoyaxitibe/1/edit. You need to call invalidate of your chart when opening the dialog.
    – Haojie
    Aug 27, 2014 at 0:37
  • Well, Allen Zhang just did what i have done, evidently he sees the solution is ok. and provided identical code in a diff jsbin. Oh well...
    – D. Seah
    Aug 27, 2014 at 0:52
  • Hi user3808826, i upvoted your answer. Your example is not running. i just edit your code from src='sapui5.netweaver.ondemand.com/resources/sap-ui-core.js' to src='sapui5.hana.ondemand.com/resources/sap-ui-core.js', as the sapui5.netweaver.ondemand.com has https issue to get the js file.
    – Haojie
    Aug 27, 2014 at 2:09
  • thanks guys, you both gave useful hints! its working now
    – dotchuZ
    Aug 29, 2014 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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