VizChart on dialog in SAP UI5 - dialog

Question

I am trying to add a Viz chart on my Dialog Box in SAP UI5, but nothings gets displayed. Here is my code, can someone please help! I added a dialog box on a press which is working fine. Even i put alerts in various part just to check if the code is running proper. There is no error, still i dont see the chart in dialog box.
pressTemp: function() {
var oView = this.getView();
var oDialog = oView.byId("helloSiteDialog");
// create dialog lazily
if (!oDialog) {
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "Hari_At_Work.view.HelloSiteDialog", this);
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.destroyDataset();
oVizFrame.destroyFeeds();
console.log("chart here");
//New dataset
oVizFrame.setDataset(new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: 'Timeline',
value: "{Country}"
}],
measures: [{
name: 'Value',
value: '{revenue}'
}],
data : {
path : "/businessData"
}
}));
alert("Dataset found");
//Add feeds
oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
uid: "categoryAxis",
type: "Dimension",
values: ["Timeline"]
}));
oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
uid: "valueAxis",
type: "Measure",
values: ["Value"]
}));
// oVizFrame.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
}]
});
oVizFrame.setModel(oModel);
alert("Model found");
oView.addDependent(oDialog);
}
oDialog.open();
// oVizFrame.invalidate();
},
My Fragment XML code:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data" xmlns:viz="sap.viz.ui5.controls" xmlns:fb="sap.ui.comp.filterbar">
<Dialog id="helloSiteDialog" title="Temperature Trend">
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/businessData}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Name"
value="{Country}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{revenue}" />
<viz.data:MeasureDefinition name="Cost"
value="{Cost}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
values="Name" />
</viz:feeds>
</viz:VizFrame>
<beginButton>
<Button text="Close" press="onCloseSiteDialog"/>
</beginButton>
</Dialog>

Answer 1

One Solution for a map inside a dialog box can be
<d:Dialog> <html:div id='map' style='width: 100%; height: 500px;'> Add you map content here </html:div> </d:Dialog>

Answer 2

Also paste view and fragment code..I have tried your code.The map is showing for me see sample in plunkr.Are you getting any error in console?
Plunk of vizframe
I have used popover.so change in code is only
oDialog.openBy(btn);