Skip to Content
avatar image
Karthik S

Set Color Condition for VizFrame SAP UI5

Mar 19, 2017 at 05:54 PM | 304 Views

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

SAPUI5
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    Mar 20, 2017 at 02:15 AM

    There is a property 'rules'.

    See detail reference here.

    Properties->plotArea->dataPointStyle

    And here is a example.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Karthik S
    Mar 20, 2017 at 05:52 AM

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Karthik S
    Mar 22, 2017 at 01:09 PM

    Hi Seungchul,

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

    Regards,

    Karthik S

    Add comment
    10|10000 characters needed characters exceeded