on 06-24-2015 3:16 AM
Dear Experts,
I am facing problems to display the data in bar chart. I have run out of idea on how to solve it. Is there anyone can share the solutions or suggestion about the ways how to display the data on bar chart in Web IDE Cloud?
Below is the code in the detail.controller.js. I am not sure whether is there any wrong to the code as shown. I have attached the output as shown in below. Kindly correct me if any part is wrong.
Very thanks and appreciated to your kindness.
Regards,
Loh
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" } }); oVizFrame.setDataset(oDataset); oVizFrame.setModel(oModel); var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ "uid": "valueAxis", "type": "Measure", "values": "{Quantity,Value}" }), feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ "uid": "categoryAxis", "type": "Dimension", "values": "{Item}" }); oVizFrame.setVizProperties({ valueAxis: { label: { formatString: "u" } }, plotArea: { dataLabel: { visible: true, formatString: "#,##0" } }, legend: { title: { visible: false } }, title: { visible: true, text: "Value by Quantity and Item" } }); oVizFrame.addFeed(feedValueAxis); oVizFrame.addFeed(feedCategoryAxis); oPopOver.connect(oVizFrame.getVizUid()); |
Hi Maksim and Dhananjay, really thanks for both of your help. I do hope this post and the questions i asked may help those who are also new to it and faced such problems. I still have some doubt on it and prepared some questions as stated below.
1)Let take this eexample :
// set feeds
var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "primaryValues",
'type' : "Measure",
'values' : ["Quantity"]
}),
Should i change the 'uid' to become "uid", same to 'type' and 'values', meant change from single quotation to double quotation? Is it the right way to do it? Because it appears a lot of blue as shown.
2) From the JS Bin code, oVizFrame.placeAt("horizontal_sample");
})();
is it i have to add it in the detail.controller.xml as well? Do i need to add
| <body class="sapUiBody" > | |
| <div id="horizontal_sample"></div> | |
| </body> |
in index.html? Because i am not sure where the "horizontal_sample" come from.
3)Should i include Below code in the detail.controller.xml or index.html?
<script type="text/javascript">
jQuery(window).resize(function() {
$('#horizontal_sample').height('').width('');
});
</script>
4) For the code below, may i know is it i also have to include it in index.html? May i know the code embedded in the body class is auto generated in JsBin or we need to write ourself?
| <body class="sapUiBody"> | ||
| <h2>Introduction</h2> |
| <h3>Sample</h3> | |||
| <div id="horizontal_sample"></div> | |||
| <h2>API Documentation</h2> | |||
| <p> | |||
| See <a class="sapUiDemokitSrcLink" | |||
| href="../../../docs/api/symbols/sap.viz.ui5.VizContainer.html">VizContainer</a>, <a class="sapUiDemokitSrcLink" | |||
| href="../../../docs/api/symbols/sap.viz.ui5.data.FlattenedDataset.html">FlattenedDataset</a> | |||
| and <a class="sapUiDemokitSrcLink" | |||
| href="../../../docs/api/symbols/sap.viz.ui5.html">general | |||
| sap.viz</a> API documentation | |||
| </p> | |||
| </body> |
Really thanks for your patience guided.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi,
See this code.
In Index.html file.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="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>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In my View file.
sap.ui.jsview("vizchart1.view1", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf vizchart1.view1
*/
getControllerName : function() {
return "vizchart1.view1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf vizchart1.view1
*/
createContent : function(oController) {
var oPopOver = 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]
});
return new 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");
var oPopOver = 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
},
Dear Maksim and Dhananjay, kindly point me out where is my wrong as i have really run out of idea to solve it. Very thanks and appreciated for help
Regards, Loh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
did you try as I suggested
var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "primaryValues",
'type' : "Measure",
'values' : [ "Quantity" ]
}),
feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "axisLabels",
'type' : "Dimension",
'values' : [ new sap.viz.ui5.controls.common.feeds.AnalysisObject({
'uid' : "Item",
'type' : "Dimension",
'name' : "Item"
}) ]
});
Hi Maksim, i have just tried the ways you suggested just now. Below is the code from detail.controller.xml, the rest were shown as previous comment. Any functions should i add in controller part in order to display the data? Because currently i just modified the onInit function in detail.controller.xml, the rest of functions i still maintained at the controller there. I also attached the screenshot as below. Kindly refer it. Thanks a lot
onInit: function() {
this.oInitialLoadFinishedDeferred = jQuery.Deferred();
var oVizFrame = this.getView().byId("idVizFrameBar");
var oPopOver = this.getView().byId("idPopOver");
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"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": "{Quantity}"
}),
feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "axisLabels",
"type": "Dimension",
"values" : [ new sap.viz.ui5.controls.common.feeds.AnalysisObject({
"uid" : "Item",
"type" : "Dimension",
"name" : "Item"
}) ]
}),
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}"
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: "Value by Quantity and Item"
}
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedAxisLabels);
oVizFrame.addFeed(feedColor);
oPopOver.connect(oVizFrame.getVizUid());
oVizFrame.placeAt("content");
if (sap.ui.Device.system.phone) {
//Do not wait for the master when in mobile phone resolution
this.oInitialLoadFinishedDeferred.resolve();
} else {
this.getView().setBusy(true);
var oEventBus = this.getEventBus();
oEventBus.subscribe("Component", "MetadataFailed", this.onMetadataFailed, this);
oEventBus.subscribe("Master", "InitialLoadFinished", this.onMasterLoaded, this);
}
this.getRouter().attachRouteMatched(this.onRouteMatched, this);
},
JS Bin - Collaborative JavaScript Debugging
properties in model are UPPERCASE!!!!!!!!!!!!!!11111
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"
}
});
Hi Dhananjay, i have some questions to ask you. The questions are as below :
1) For detail.view.xml, is it possible i write in this way in cloud Web IDE? This is the way provided in SAPUI5 demo kit there because i copied the code provided by you in view file appear error after i run it.
| <IconTabFilter icon="sap-icon://enter-more" id="iconTabFilter2" key="SOHeader"> | ||||||||
| <content> | ||||||||
| <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%"> | ||||||||
| <viz:Popover id="idPopOver"></viz:Popover> | ||||||||
| <viz:VizFrame height="100%" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame> | ||||||||
| </ScrollContainer> | ||||||||
| </content> | ||||||||
| </IconTabFilter> |
If yes, may i know how to included the content:[oViz] in the scrollContainer and also how to include
return new sap.m.Page({
title: "Title",
content: [
oContainer
]
});
2)For detail.controller.xml, it appear error in console statement
3) Below screen shot is taken from index.html,
a) may i know do i still need to keep the box which is highlighted in red color?
b) For "vizchart1", is it we just defined it in index.html or we still need to use this id in detail.controller.xml or detail.view.xml?
c) For idview11, is it also defined in index.html only?
d) For box highlighted in grey, do i need to make any changes to it as i am using trial version cloud Web IDE?
Thanks for spending time corrected me. I am learning through this exercise. Hope you able to coach me.
Regards,
Loh
Hi Loh,
Answers to your queries.
1. When you create your project, You have 4 options to create your view. You may create Javascript view, XML view, JSON view or HTML view. Nowadays XML and Javascript views are popularly used.
As i see your code, You are using XML view. And i am using Javascript view. My code in XML view will not work because an XML tags are expected. So if you are using my code then you have to create javascript view. Yes the code in WEB IDE cloud is created by XML view and it's correct. Thats's why it's working. I will explore how to create view using XML and i will let you know. If you want to use my code then create javascript view.
These might help you for creating XML views.
2. console.log() is a javascript method by which we debug that we are getting our data or not. Sometimes we get nothing in data.So it is not used in program.Just used for debugging our code. This is just for debugging. Yoy may check in console of your browser also.
3. a. You don't need it if you will use my code.
b. When you will create your project using Javascript view, this is created. You may see it under webContent folder. This is not a ID or something. This is generated and this is resources folder from where SAPUI5 application loads everything.
c. This is auto generated viewid. Here i have given my view name as view1 so eclipse has generated an id appending another 1, so it's now idview11.
d. I have not used this WEB IDE. But basically this is telling me that my view type is javascript. and yes perhaps you will need it.
I am using eclipse so can't suggest much about WEB IDE but coding in all environment is basically same.
This is the code where i put in detail.view.xml :
<IconTabFilter
id="iconTabFilter2"
key="SOHeader"
icon="sap-icon://enter-more">
<content>
<ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame height="2000px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="1000%"></viz:VizFrame>
</ScrollContainer>
</content>
</IconTabFilter>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Use like this.
'values': ["QUANTITY"]
Then it will not throw error.
and yes your properties in model are in uppercase and you are using as first letter as uppercase and rest as lowercase.
Wherever you have used value: "{Quantity}" like this use it like value: "{QUANTITY}" as pointed out by Maskim. This is really important.
Here is the detail.controller.xml for you to refer :
onInit: function() {
this.oInitialLoadFinishedDeferred = jQuery.Deferred();
var oVizFrame = this.getView().byId("idVizFrameBar");
var oPopOver = this.getView().byId("idPopOver");
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"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": "{Quantity}"
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": "{Item}"
}),
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}"
}
},
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());
oVizFrame.placeAt("content");
if (sap.ui.Device.system.phone) {
//Do not wait for the master when in mobile phone resolution
this.oInitialLoadFinishedDeferred.resolve();
} else {
this.getView().setBusy(true);
var oEventBus = this.getEventBus();
oEventBus.subscribe("Component", "MetadataFailed", this.onMetadataFailed, this);
oEventBus.subscribe("Master", "InitialLoadFinished", this.onMasterLoaded, this);
}
this.getRouter().attachRouteMatched(this.onRouteMatched, this);
},
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": "{Quantity}" // change it to [Quantity]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": "{Item}" // change it to [Item]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "color",
"type": "Measure",
"values": "{Value}" // change it to [Value]
});
First i would like to ask that where you have defined this variable? oVizFrame?
Is this in your view? or is this in same controller or code. Where you have written it?
If this is in your view then first access it by ID to this controller.
I didn't see oVizFrame so i asked.
Rest looks okay to me.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
iam not sure you can do "values": "{Quantity,Value}"
try just one
like
"values": "{Quantity}"
or
"values": "{Value}"
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Maksim, thanks for respond. i have tried the way as SAPUI5 demo kit shown previously as shown below but it also cant work. Do i need to write anything at index.html there?
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": "{Quantity}"
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": "{Item}"
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "color",
"type": "Measure",
"values": "{Value}"
});
may be
var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "primaryValues",
'type' : "Measure",
'values' : [ "Quantity" ]
}),
feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "axisLabels",
'type' : "Dimension",
'values' : [ new sap.viz.ui5.controls.common.feeds.AnalysisObject({
'uid' : "Item",
'type' : "Dimension",
'name' : "Item"
}) ]
});
Hi Maksim and Dhananjay,
Here is index.html there i put as below for u refer (kindly correct me if you feel i wrong in any parts) :
| <script id="sap-ui-bootstrap" | |||
| type='text/javascript' | |||
| src="resources/sap-ui-core.js" | |||
| data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" | |||
| data-sap-ui-theme="sap_bluecrystal" | |||
| data-sap-ui-xx-bindingSyntax="complex" | |||
| data-sap-ui-resourceroots='{"SO": "./"}'> | |||
| </script> |
| <script id="view1" type="sapui5/xmlview"> |
<mvc:View
controllerName="SO.view.Detail"
xmlns:viz="sap.viz.ui5.controls"
xmlns:mvc="sap.ui.core.mvc" >
<viz:VizFrame id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="1000%" height="2000px">
</viz:VizFrame>
</mvc:View>
</script>
| <body class="sapUiBody" > | |
| <div id="content"></div> | |
| </body> |
Discussion successfully moved from SAP Fiori to SAPUI5 Developer Center as your question is more WebIDE/SAPUI5 than Fiori.
Regards, Mike (Moderator)
SAP Technology RIG
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.