Hi,
See this code.
In Index.html file.
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metahttp-equiv='Content-Type'content='text/html;charset=UTF-8'/>
<scriptsrc="https://sapui5.netweaver.ondemand.com/sdk/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("vizchart1");
var app = new sap.m.App({initialPage:"idview11"});
var page = sap.ui.view({id:"idview11", viewName:"vizchart1.view1", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<bodyclass="sapUiBody"role="application">
<divid="content"></div>
</body>
</html>
In my View file.
sap.ui.jsview("vizchart1.view1", {
/**SpecifiestheControllerbelongingtothisView.
*Inthecasethatitisnotimplemented,orthat"null"isreturned,thisViewdoesnothaveaController.
*@memberOfvizchart1.view1
*/
getControllerName : function() {
return"vizchart1.view1";
},
/**IsinitiallycalledonceaftertheControllerhasbeeninstantiated.ItistheplacewheretheUIisconstructed.
*SincetheControllerisgiventothismethod,itseventhandlerscanbeattachedrightaway.
*@memberOfvizchart1.view1
*/
createContent : function(oController) {
varoPopOver = new sap.m.Popover("popId", {
});
var oViz = new sap.viz.ui5.controls.VizFrame("idVizFrameBar",{
vizType: "bar",
width: "100%" ,
height:"700px"
});
var oContainer = new sap.m.ScrollContainer({
width : "100%",
height : "100%",
horizontal : false,
vertical : true,
focusable : true,
content:[oViz]
});
returnnew sap.m.Page({
title: "Title",
content: [
oContainer
]
});
}
});
In my controller file.
onInit: function() {
//this.oInitialLoadFinishedDeferred = jQuery.Deferred();
//var oVizFrame = this.getView().byId("idVizFrameBar");
var oVizFrame = sap.ui.getCore().byId("idVizFrameBar");
varoPopOver = sap.ui.getCore().byId("popId");
var oModel = new sap.ui.model.json.JSONModel({
SOItems: [
{
ITEM: "Tablet",
QUANTITY: 2067.45,
VALUE: 7373.99,
COLOR : "red"
},
{
ITEM: "Desktop",
QUANTITY: 3110.93,
VALUE: 9920.91,
COLOR : "green"
},
{
ITEM: "Mouse",
QUANTITY: 3003.97,
VALUE: 2058.64,
COLOR : "blue"
},
{
ITEM: "Modem",
QUANTITY: 6721.61,
VALUE: 9149.65,
COLOR : "purple"
},
{
ITEM: "Printer",
QUANTITY: 9636.25,
VALUE: 3752.46,
COLOR : "orange"
},
{
ITEM: "Ink",
QUANTITY: 9169.62,
VALUE: 9221.43,
COLOR : "yellow"
}
]
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: "Item",
value: "{ITEM}"
}],
measures: [{
name: "Quantity",
value: "{QUANTITY}"
},
{
name: "Value",
value: "{VALUE}"
}],
data: {
path: "/SOItems"
}
});
console.log(oVizFrame);
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
uid: "valueAxis",
type: "Measure",
values: "{QUANTITY}"
});
var feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
uid: "categoryAxis",
type: "Dimension",
values: "{ITEM}"
});
var feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
uid: "color",
type: "Measure",
values: "{VALUE}"
});
oVizFrame.setVizProperties({
valueAxis: {
label: {
formatString: "u"
}
},
plotArea: {
dataLabel: {
visible: true,
//colorPalette:"{#00FF00,#FFC200,#FF0000,,#FFC200,#FF0000, #00FF00}"
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: "Value by Quantity and Item"
}
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
oVizFrame.addFeed(feedColor);
//oPopOver.connect(oVizFrame.getVizUid());
The only difference between your code and mine is i have used JS view.
It's working.
Regards
Dhananjay
},