Skip to Content
0
Former Member
Jun 27, 2015 at 12:07 AM

How to create Bar Chart in XMLview?

993 Views

Dear Experts,

Currently I intend to create the bar chart by using the mock data in the second IconTabFilter in the detail.view.xml. I copied the code directly from SAPUI5 Demo Kit there but i am not sure whether there are errors, what should be add in the index.html, detail.controller.xml (in onInit: function()) or detail.view.xml in order to display data in the bar chart. Please correct me if any part i did wrong.

Thanks.

Here is the onInit Function:

onInit: function() {

this.oInitialLoadFinishedDeferred = jQuery.Deferred();

var oVizFrame = sap.ui.getCore().byId("idVizFrameBar");

var oPopOver = sap.ui.getCore().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.setModel(oModel);

oVizFrame.setDataset(oDataset);

// set feeds

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"

})]

}),

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(feedPrimaryValues);

oVizFrame.addFeed(feedAxisLabels);

oVizFrame.addFeed(feedColor);

oPopOver.connect(oVizFrame.getVizUid());

Regards,

Loh