Harvey Ball Micro Chart in SAP UI5

[former_member670464]

Hi All,

In this blog post, I am going to explain how to visualize fraction/percentage compared to its total with multiple colors using Harvey Ball Micro Chart which is fully responsive, and size can be adjustable dynamically based on dimensions.

Logon to the SAP Cloud Platform and Create a project with the project name "HarveyBallMicroChart”.

Create a JSON file within the model folder of the application.

Data.Json:

Specify the data in the JSON file as below:

{

	"Data": [{

		"Rollno": "1234",

		"Name": "Sreelekha",

		"Gender": "Female",

		"size": "S",

		"percentage": 90.2,

		"option": "Good",

		"total": 100,

		"colorPalette": ""

	}, {

		"Rollno": "2345",

		"Name": "Sindhu",

		"Gender": "Female",

		"size": "S",

		"percentage": 75,

		"option": "Critical",

		"total": 100,

		"colorPalette": ""

	}, {

		"Rollno": "3456",

		"Name": "Sunil",

		"Gender": "Male",

		"size": "L",

		"percentage": 65.7,

		"option": "Error",

		"total": 100,

		"colorPalette": ""

	}, {

		"Rollno": "4567",

		"Name": "Swathi",

		"Gender": "Female",

		"size": "L",

		"percentage": 45.5,

		"option": "Neutral",

		"total": 100,

		"colorPalette": ""

	}]

}

In the view define a chart of type Harvey Ball Micro Chart by using the required namespace xmlns:micro="sap.suite.ui.microchart".

Then we should design the view to display Table Data. Here is the code for view and controller.

View:

<mvc:View controllerName="com.HarveyBallMicroChartHarveyBallMicroChart.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml"

	xmlns:mvc="sap.ui.core.mvc" xmlns:micro="sap.suite.ui.microchart" displayBlock="true" xmlns="sap.m">

	<App>

		<pages>

			<Page title="Harvey Ball Micro Chart">

				<content>

					<Panel>

						<Table items="{ path: 'dataModel>/Data'}">

							<columns>

								<Column>

									<Label text="Roll no" design="Bold"></Label>

								</Column>

								<Column>

									<Label text="Name" design="Bold"></Label>

								</Column>

								<Column>

									<Label text="Gender" design="Bold"></Label>

								</Column>

								<Column>

									<Label text="Percentage" design="Bold"></Label>

								</Column>

							</columns>

							<items>

								<ColumnListItem>

									<cells>

										<Text text="{dataModel>Rollno}"></Text>

										<Text text="{dataModel>Name}"></Text>

										<Text text="{dataModel>Gender}"></Text>

										<micro:HarveyBallMicroChart size="{dataModel>size}" total="{dataModel>total}" colorPalette="{dataModel>colorPalette}" totalScale="%"

											showTotal="true" showFractions="true">

											<micro:items>

												<micro:HarveyBallMicroChartItem fraction="{dataModel>percentage}" color="{dataModel>option}" fractionScale="%"/>

											</micro:items>

										</micro:HarveyBallMicroChart>

									</cells>

								</ColumnListItem>

							</items>

						</Table>

					</Panel>

				</content>

			</Page>

		</pages>

	</App>

</mvc:View>

Controller:

	onInit: function() {

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

			this.getView().setModel(dataModel, "dataModel");

		}

Now run the application, we can able to see the screen with table data like below.

If we want to use extra colors other than standard ones available here, use “colorpalatte” property which is available to “Harvey Ball Micro Chart” Control.

Just add the below object in the JSON data and run the application once again. You can see the screen like below:

{

		"Rollno": "5678",

		"Name": "swetha",

		"Gender": "Female",

		"size": "L",

		"percentage": 30.1,

		"option": "",

		"total": 100,

		"colorPalette": "#ED4A7B"

	}

Output:

 

Conclusion: By the following, we have successfully visualized fraction/percentage compared to its total with multiple colors.