SAPUI5将图表附加到对话框

Question

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');
});

Answer 1

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