Accepted Solutions (1)
Hi Maksim, i have went through the SAPUI5 SDK and may i know the screenshots that i attached are you needed?
Hi Loh,
I was trying to work with SAP WebIde locally and XML.
I tried with your application.
First i created an app like this.
File->New->Project From Template
Then i selected this.
After that, i wrote this code in my view.
************** This was created by default****************
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
******************************
xmlns:viz="sap.viz.ui5"// I Included this
************** This was created by default****************
controllerName="view.View1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Bar Diagram">
<content>
******************************
// I wrote this in my code
<ScrollContainer height="100%" width="100%" horizontal="false" vertical="true" focusable="true">
<viz:Bar id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%" height="700px"></viz:Bar>
</ScrollContainer>
// till here
</content>
</Page>
</core:View>
Then i wrote this code in my controller.
| onInit: function() { |
var oVizFrame = this.getView().byId("idVizFrameBar");
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"
}
});
oDataset.setModel(oModel);
oVizFrame.setDataset(oDataset);
} I kept index'html as as usual. After this i got the output. |
Hi Maksim, i have added into it. The output is shown as below
Hi Loh,
I Just created, what you want.
Create an SAPUI5 application project as i suggested earlier.
Don't do anything with index.html file which is auto generated.
This is code of view.
Code in Controller.
var oVizFrame = this.getView().byId("idVizFrameBar");
var oPopOver = this.getView().byId("idPopOver");
var oModel = new sap.ui.model.json.JSONModel("https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/demokit/dataset/bookstore_fiori/ByItemCi...");
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Item Category",
value: "{Item Category}"
}, {
name: 'City',
value: '{City}'
}],
measures: [{
name: 'Revenue',
value: '{Revenue}'
}],
data: {
path: "/book"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Revenue"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Item Category"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["City"]
});
oVizFrame.setVizProperties({
valueAxis: {
label: {
formatString: 'u'
}
},
plotArea: {
dataLabel: {
visible: true,
formatString: "#,##0"
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Revenue by City and Item Category'
}
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
oVizFrame.addFeed(feedColor);
oPopOver.connect(oVizFrame.getVizUid());
This has been written in onInit method and it's working.
First check if this is working in your application and then change the data.
Your Model data is also incomplete for such types of Bar diagram.
Refer this link https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/demokit/dataset/bookstore_fiori/ByItemCi... for your better understanding and see how this has been used in SAPUI5 Explored.
Regards
Dhananjay
Hi Dhananjay, really thanks for helping, glad to have you help to solve the problems. I feel very excited after managed to display the bar chart. I got 2 simple questions wish to ask you after i am managed to display the bar:
1st : How to change the bar color? Is it we have to insert
//colorPalette:"{#00FF00,#FFC200,#FF0000,,#FFC200,#FF0000, #00FF00}" in the plotArea there?
if yes, where can i find all the color code so that i can put the c.olor code that i wish to display?
2nd: In the code below i found that when i changed the "u" to another alphabet (let say alphabet a), the x-axis will "a" instead of value. I feel wonder why it is like that
oVizFrame.setVizProperties({
valueAxis: {
label: {
formatString: "u"
}
},
I attached the screenshot for you to refer
if 'u' replaced by zero
if 'u' replaced by 'a'
3) How to set the value on x-axis?
Dhananjay, thanks so much and welcomed shared with me in case you know it.
Regards,
Loh
This is for your third question.
Hi Dhananjay, according graph i shown , the value on x-axis is 0, 100K, 200K and so on ,which means the interval value is 100K. Is it possible we make it such as 0, 200K, 400K and so on on x-axis?
Answers (0)
| User | Count |
|---|---|
| 81 | |
| 10 | |
| 10 | |
| 9 | |
| 7 | |
| 6 | |
| 6 | |
| 5 | |
| 4 | |
| 4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.