Quantcast
Channel: SCN: Message List
Viewing all articles
Browse latest Browse all 8944

How to color individual bars in sap.viz.ui5.Bar based on the condition

$
0
0

Hi Experts ,

 

 

I need to apply color to individual bars in sap.viz.ui5.Bar or sap.viz.ui5.StackedColumn based on condition.

 

 

I am trying this code , But its not working.

 

Can you suggest some solution for this. how we can color individual bars without using color palette.

 

 

var oModel = new sap.ui.model.json.JSONModel({

businessData: [{

Country: null,

revenue: 0,

profit: 0,

population: 0

}, {

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

}]

});

 

 

 

 

var filter = new sap.ui.model.Filter("Country", function(oValue) {

return oValue !== null;

});

var oDataset = new sap.viz.ui5.data.FlattenedDataset({

dimensions: [{

axis: 1,

name: 'Country',

value: "{Country}"

}],

measures: [{

name: 'Profit',

value: {

path: "profit",

formatter: function(oVal) {

if (oVal > 0) {

//if profit greater than 0.then color pallete :

oBarChart.getAggregation('plotArea').setColorPalette(['#00B050', '#CCFF66']); //green / yellow

} else {

oBarChart.getAggregation('plotArea').setColorPalette(['#b71b32', '#1b32b7']); //red/ blue

}

return oVal;

}

}

}, {

name: 'Revenue',

value: '{revenue}'

}]

}).bindData("/businessData", null, null, [filter]);

 

 

 

 

var oBarChart = new sap.viz.ui5.Bar({

width: "80%",

height: "400px",

plotArea: {

},

title: {

visible: true,

text: 'Profit and Revenue By Country'

},

dataset: oDataset

});

 

 

 

 

oBarChart.setModel(oModel);

return (oBarChart);

 

 

Thanks,

Sandeep


Viewing all articles
Browse latest Browse all 8944

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>