Skip to Content

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.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. 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.

    (0) 
    1. Navya Shree 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 }

      }

      });

      (1) 

Leave a Reply