Skip to Content
0

Set Color Condition for VizFrame SAP UI5

Mar 19, 2017 at 05:54 PM

85

avatar image

Hi,

I have bar graph in vizframe. I need to set color conditions like whenever the bar reaches some percentage, it should change the color automatically. For example, If the vizframe has percentage as Y axis and student mark as x axis. If the student mark reaches more 50%, the bar color should change. It would be helpful, if you share any working example.

Thanks and regards,

Karthik S

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Seungchul Yang Mar 20, 2017 at 02:15 AM
0

There is a property 'rules'.

See detail reference here.

Properties->plotArea->dataPointStyle

And here is a example.

Share
10 |10000 characters needed characters left characters exceeded
Karthik S Mar 20, 2017 at 05:52 AM
0

Hi Seungchul,

I have tried the property values. But I am getting empty data in graph.Please find the screen shot.

Here is my code.

View:

<viz:VizFrame id="idVizFrame" vizType="info/column" uiConfig="{applicationSet:'fiori'}">

controller code:

dataPointStyle : { "rules": [{ "dataContext" : [{ "Revenue" : { "min" : "1k" } }], "properties" : { "color" : "#ff0000" }, "displayName" : "Revenue > 450k" }, { "dataContext" : [{ "Revenue" : { "max" : "6k" } }], "properties" : { "color" : "#00ff00" }, "displayName" : "Revenue < 140k" }], "others" : { "properties" : { "color" : "#000" }, "displayName": "Others" } }

Data :

var Data = { "businessData":[ {'Country' : "Canada", 'Product' :'Car', 'Revenue' : '1m', 'status' : 'Active' }, {'Country' : "China", 'Product' :'Car', 'Revenue' : '45k', 'status' : 'InProgress'}, {'Country' : "France", 'Product' :'Car', 'Revenue' : '200m', 'status' : 'Completed'}, {'Country' : "Germany", 'Product' :'Car', 'Revenue' : '60k', 'status' : 'Failed'}, {'Country' : "India", 'Product' :'Car', 'Revenue' : '2m', 'revenue' : 'InProgress'}, {'Country' : "United States", 'Product' :'Car', 'Revenue' : '0.5k', 'status' : 'Active'}, {'Country' : "Canada", 'Product' :'Truck', 'Revenue' : '400m', 'status' : 'Completed' }, {'Country' : "China", 'Product' :'Truck', 'Revenue' : '23.82k', 'status' : 'Failed'}, {'Country' : "France", 'Product' :'Truck', 'Revenue' : '44k', 'status' :'Completed'}, {'Country' : "Germany", 'Product' :'Truck', 'Revenue' : '50k', 'status' : 'InProgress'}, {'Country' : "India", 'Product' :'Truck', 'Revenue' : '500m', 'status' : 'Failed'}, {'Country' : "United States", 'Product' :'Truck', 'Revenue' : '5k', 'status' : 'Active'} ] }; var oModel = new sap.ui.model.json.JSONModel(Data); this.getView().setModel(oModel);

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Property 'Revenue' of Data should be a numeric type not a string.

1m->1000000

1k->1000

0
Karthik S Mar 22, 2017 at 01:09 PM
0

Hi Seungchul,

Thank you. That was my mistake. Now the rule property is working fine. Thanks for your information.

Regards,

Karthik S

Share
10 |10000 characters needed characters left characters exceeded