Skip to Content
Author's profile photo Navya Shree

Stacked Bar/Column chart example using VizFrame in UI5.

Stacked bar charts are used to display information about the sub-groups that make up the different categories. In stacked bar charts the bars representing the sub-groups are placed on top of each other to make a single column, or side by side to make a single bar. The overall height or length of the bar shows the total size of the category while different colors or shadings are used to indicate the relative contribution of the different sub-groups.

Data.Json:

JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the model folder of the application.

Specify the data in the JSON file as below:

{
"items" : [
             {
                 "Year": "2012",
                 "Milk": "20",
                 "Sugar": "5",
                 "Tea": "5"
             },
             {
                 "Year": "2013",
                 "Milk": "30",
                 "Sugar": "10",
                 "Tea": "10"
             },
             {
                 "Year": "2014",
                 "Milk": "35",
                 "Sugar": "15",
                 "Tea": "15"
             },
             {
                 "Year": "2015",
                 "Milk": "60",
                 "Sugar": "20",
                 "Tea": "20"
             },
             {
                 "Year": "2016",
                 "Milk": "70",
                 "Sugar": "40",
                 "Tea": "40"
             }
        ]
        }

To access the above JSON file throughout the application, specify the JSON file URI in the model under sap.ui5 section in the manifest.json file. we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model as shown below.

"sap.ui5": {
…………………………….
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "Dual_Bar_Chart.i18n.i18n"
				}
			},
			"Data": {
				"Data": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/Data.json"
				}
			}
			
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}

View:
In the view define a Vizframe chart of type Stacked Bar by using the required namespace xmlns:viz=”sap.viz.ui5.controls”.

<viz:VizFrame  xmlns="sap.viz" id="idStackedChart"  vizType="stacked_bar" width="100%" height="100%">
</viz:VizFrame>

Controller:

In the init() function of the Controller set up the data for the chart using measures and dimension.

In our example I have taken Year as the Dimension,

Milk, Sugar and Tea as measures.

onInit: function() {
var sampleDatajson = new sap.ui.model.json.JSONModel("model/Data.json");
			var oVizFrame = this.getView().byId("idStackedChart");
			oVizFrame.setVizProperties({
				plotArea: {
					colorPalette: d3.scale.category20().range(),
					dataLabel: {
						showTotal: true
					}
				},
				tooltip: {
					visible: true
				},
				title: {
					text: "Stacked Bar Chart"
				}
			});
			var oDataset = new sap.viz.ui5.data.FlattenedDataset({
				dimensions: [{
					name: "Year",
					value: "{Year}"
				}],

				measures: [{
					name: "Milk",
					value: "{Milk}"
				}, {
					name: "Sugar",
					value: "{Sugar}"
				}, {
					name: "Tea",
					value: "{Tea}"
				}],

				data: {
					path: "/items"
				}
			});
			oVizFrame.setDataset(oDataset);

			oVizFrame.setModel(sampleDatajson);

			var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Milk"]
				}),
				oFeedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Sugar"]
				}),
				oFeedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Tea"]
				}),

oFeedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "categoryAxis",
					"type": "Dimension",
					"values": ["Year"]
				});

			oVizFrame.addFeed(oFeedValueAxis);
			oVizFrame.addFeed(oFeedValueAxis1);
			oVizFrame.addFeed(oFeedValueAxis2);
			oVizFrame.addFeed(oFeedCategoryAxis);

		}

OUTPUT:

The Output Displays all three 3 items sold in a particular year differentiated by color of the bar.

The total items sold in a particular year is displayed at the end of the bar.

Selecting the category at the right top displays the chart as shown below.

 

Clicking the particular bar, the data will be displayed as below.

 

Note: To display the same Data in form of stacked Column Chart, vizType stacked_column can be used instead of stacked_bar in the view.

Assigned tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Good work

      Author's profile photo Former Member
      Former Member

      Thanks Navya for the helpful post. I just found what I've been looking for.

      Author's profile photo Navya Shree
      Navya Shree
      Blog Post Author

      Welcome  james:)

      Author's profile photo Amit Pandey
      Amit Pandey

      Hi, I am currently working on Viz Frame chart and I am facing problem in representing value in x-axis. my chart data values are like - 0.22, 0.09, 0.07 ,0.05 etc and I want this value to be represented on x-axis in scale - 0.1,0.2,0.3,0.4 ..... so on. However when I put this value I am getting x-axis as  10M, 20M , 30M .. so on. Can you help on this.

      Author's profile photo Navya Shree
      Navya Shree
      Blog Post Author

      Hi Amit,

      i tried with the same values as you mentioned and i got proper scale like 0.5, 1, 1.5, 2 so on.

      you can try adjusting the width of the frame or else try the below code it worked for me

       

      var oVizFrame = this.getView().byId("idStackedChart");

      oVizFrame.setVizProperties({

      yAxis:{

      scale:{

      fixedRange:true,

      minValue:0.0,

      maxValue:1 }

      }

      });

      Author's profile photo Amit Pandey
      Amit Pandey

      Thanks for the solution. it worked for me by using

      valueAxis: {
         label: {
            formatString: "0.00"
         }
      }

       

      Author's profile photo Amit Pandey
      Amit Pandey

      How can we represent x-axis value in decimals.

      Author's profile photo Former Member
      Former Member

      Hi Navya ,

      I'd like to thank you for this topic ,

      Actually , I was wondering if there is a way to bind  FeedItem with setModel

       

      var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ "uid": "valueAxis", "type": "Measure", "values": ["Milk"] }),

       

      Best Regards,

      Ramzi

      Author's profile photo Philip Bartholomew
      Philip Bartholomew

      Really great example of how to achieve a good looking chart very simply.

      Is there a way you know of to add a Target value to a stacked chart as you can do with the bullet chart?

       

      Thanks

       

      Phil

       

      Author's profile photo Nanjundeshwara K
      Nanjundeshwara K

      Good Work Navya

      Author's profile photo Paulo de Tharso Castro
      Paulo de Tharso Castro

      How can i change the width of the column items?

      Author's profile photo Thirumoorthy Rajaram
      Thirumoorthy Rajaram

      Thanks Navya for such a wonderful post.

      How can I fetch the data from Odata source??

      Added my data source in SAP web IDE and tried the below code in controller.js

      var oModel = new sap.ui.model.odata.v2.ODataModel("/sap/opu/odata/SAP/ZGW_SUPPLIER_OVERVIEW_SRV/");

      No Data is the output

      Best Regards,

      Thiru

      Author's profile photo Pawan Kalyan
      Pawan Kalyan

      Hello,

      I am facing an issue with binding of viz chart . when i tried to show only viz chart , i was getting the chart . but when i added a selection scren above viz chart and on click of go button ,my viz chart is not coming with invalid data error . complete details of the logic and error are mentioned in the below thread. can someone please help

      https://answers.sap.com/questions/477815/invalid-data-binding-in-bar-chart-sap-ui5-viz-char.html

       

      Author's profile photo Nagaraj J
      Nagaraj J

      Hi Navya,

      Thank you for the great blog, It was too helpful

      Actually I have one issue that is, in my case I am having multiple measures, with a dimension, my requirement is to add different data label properties for each measures, Is it possible to achieve this?

      Regards,

      Nagaraj