Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
vikas_garg2
Explorer
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
1 Comment
Labels in this area