Stacked Bar/Column chart example using VizFrame in UI5.

[navya_shree2]

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.