Dual Stacked Column/Bar 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 whilst different colors or shadings are used to indicate the relative contribution of the different sub-groups.

In case of Dual Stacked column/bar, Two columns/bar placed next to each other.

In our example I am going to display dual stacked column/bar chart which displays the count of Milk, Sugar and Tea packets sold for all Quarters both for current and previous year.

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" : [

             {

                 "Quarter": "Q1",

                 "MilkCurrYear": "20",

                 "MilkPrevYear": "30",

                 "SugarCurrYear": "40",

                 "SugarPrevYear": "35",

                 "TeaCurrYear": "48",

                 "TeaPrevYear": "20"

             },

             {

                 "Quarter": "Q2",

                 "MilkCurrYear": "30",

                 "MilkPrevYear": "20",

                 "SugarCurrYear": "10",

                 "SugarPrevYear": "20",

                 "TeaCurrYear": "10",

                 "TeaPrevYear": "5"

             },

             {

                 "Quarter": "Q3",

                 "MilkCurrYear": "35",

                 "MilkPrevYear": "20",

                 "SugarCurrYear": "15",

                 "SugarPrevYear": "20",

                 "TeaCurrYear": "15",

                 "TeaPrevYear": "5"

             },

             {

                 "Quarter": "Q4",

                 "MilkCurrYear": "60",

                 "MilkPrevYear": "20",

                 "SugarCurrYear": "20",

                 "SugarPrevYear": "20",

                 "TeaCurrYear": "20",

                 "TeaPrevYear": "5"

             }

        ]

        }

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_Column_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 Dual Stacked Column by using the below namespaces

xmlns:viz="sap.viz.ui5.controls"

xmlns:vizFeeds="sap.viz.ui5.controls.common.feeds"

xmlns:vizData="sap.viz.ui5.data".

 

Also set up the data using Measures and Dimensions.

In our example I have taken Quarter as the Dimension,

Milk, Sugar and Tea sold in previous and current year as measures.

 

<viz:VizFrame xmlns="sap.viz" id="idDualStackedChart" vizType="dual_stacked_column" width="100%"

						height="100%" vizProperties="{dataLabel:{ showTotal: true},title:{ text:'Dual Stacked Column Example'}}">

						<viz:dataset>

							<vizData:FlattenedDataset data="{/items}">

								<vizData:dimensions>

									<vizData:DimensionDefinition name="Quarter" value="{Quarter}"/>

								</vizData:dimensions>

								<vizData:measures>

									<vizData:MeasureDefinition name="Milk Current Year" value="{MilkCurrYear}"/>

									<vizData:MeasureDefinition name="Sugar Current Year" value="{SugarCurrYear}"/>

									<vizData:MeasureDefinition name="Tea Current Year" value="{TeaCurrYear}"/>

									<vizData:MeasureDefinition name="Milk Previous Year" value="{MilkPrevYear}"/>

									<vizData:MeasureDefinition name="Sugar Previous Year" value="{SugarPrevYear}"/>

									<vizData:MeasureDefinition name="Tea Previous Year" value="{TeaPrevYear}"/>

								</vizData:measures>

							</vizData:FlattenedDataset>

						</viz:dataset>

						<viz:feeds>

							<vizFeeds:FeedItem uid="valueAxis" type="Measure" values='Milk Current Year,Sugar Current Year,Tea Current Year'/>

							<vizFeeds:FeedItem uid="valueAxis2" type="Measure" values='Milk Previous Year,Sugar Previous Year,Tea Previous Year'/>

							<vizFeeds:FeedItem uid="categoryAxis" type="Dimension" values="Quarter"/>

						</viz:feeds>

					</viz:VizFrame>

Controller:

In the init() function of the Controller fetch the json data and make it available for the view to access..

 

	onInit: function() {

			var sampleDatajson = new sap.ui.model.json.JSONModel("model/Data.json");

			this.getView().setModel(sampleDatajson);

		}

OUTPUT:

The Output Displays all three 3 items sold in a particular Quarter for current and previous year differentiated by color of the column.

The total items sold in a particular Quarter for an particular year is displayed at the end of the column.



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



Clicking the particular column slice, the data will be displayed as below.



 

Note: To display the same Data in form of Dual Stacked Bar Chart, vizType dual_stacked_bar can be used instead of dual_stacked_column in the view.