Use column Chart in SAP Ui5 with different color of Bars

[vikas_garg2]

Introduction:

In this Blog we will learn, How to use column chart in SAP UI5 with different color Bars.

 

In Now days using chart is a New way to visualize your data and many times we are using different type of Charts as per business requirement. Sometimes we get a requirement to use different colors in charts to show our data. In this blog we will learn how we can use column chart in SAP UI5. with different color bars.

 

1. Below Example is for Column Chart


2. In the below blog we are trying to show different color bars in column chart.

 

Step by Step Process:

Below Example is for XML Type View

Step 1 :- Create Chart in the View Using below Code : 

<viz:VizFrame xmlns="sap.viz" id="idcolumn" class="class32" height="320px" width="100%"> </viz:VizFrame>

 

Step 2: – Now we need to declare the Data Point Style in the Viz Set Property like below :

 

dataPointStyle: {

                                "rules":

                                [

                                    {

                                        "dataContext": {"TicketType": "InProgress"},

                                        "properties": {

                                                "color":"#002080",

                                                "dataPointWidth ": "80%"

                                        },

                                        "displayName": "Incident"

                                    },

                                    {

                                        "dataContext": 	{"TicketType": "Success"},

                                        "properties": {

                                                "color":"#38B44A"

                                        },

                                        "displayName": "RITM"

                                    },

                                    {

                                        "dataContext": 	{"TicketType": "Pending"},

                                        "properties": {

                                                "color":"#9e1b8d"

                                        },

                                        "displayName": "ENHC"

                                    },

                                    {

                                        "dataContext": 	{"TicketType": "Failed"},

                                        "properties": {

                                                "color":"#e3580e"

                                        },

                                        "displayName": "Defect"

                                    }

                                ]

                            },

 

Also We want to give a 3D Effect to our Chart we can use the below property of Viz Chart also in the Viz Set property

 

drawingEffect: "glossy",

 

Once we are done with the changes our chart looks like below :

 

 

Vikas Garg

[former_member198924]

Hi Vikas,

Can you please share the xmlview and controller, dataset code for the column chart.