Skip to Content
Author's profile photo Navya Shree

Donut Chart example using VizFrame in UI5.

Pie charts are extensively used in presentations and offices, Pie Charts help show proportions between categories, by dividing a circle into proportional segments. Each arc length represents a proportion of each category, while the full circle represents the total sum of all the data, equal to 100%.

A donut chart is essentially a Pie Chart with an area of the center cut out.

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": [{
		"Department": "R & D",
		"EmployeeCount": "20"
	}, {
		"Department": "Syngenta",
		"EmployeeCount": "30"
	}, {
		"Department": "Volvo",
		"EmployeeCount": "35"
	}, {
		"Department": "NIKE",
		"EmployeeCount": "60"
	}, {
		"Department": "ADIDAS",
		"EmployeeCount": "70"
	}]
}

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": "Donut_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 donut 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”.

In our example I have taken Department as the Dimension,

Employee Count as measures.

<viz:VizFrame xmlns="sap.viz" id="idDonutChart" vizType="donut" width="100%" height="100%"
						vizProperties="{plotArea: { drawingEffect: 'glossy' },title:{ text:'Donut Chart Example'}}">
						<viz:dataset>
							<vizData:FlattenedDataset data="{/items}">
								<vizData:dimensions>
									<vizData:DimensionDefinition name="Department" value="{Department}"/>
								</vizData:dimensions>
								<vizData:measures>
									<vizData:MeasureDefinition name="Employee Count" value="{EmployeeCount}"/>
								</vizData:measures>
							</vizData:FlattenedDataset>
						</viz:dataset>
						<viz:feeds>
							<vizFeeds:FeedItem uid="size" type="Measure" values='Employee Count'/>
							<vizFeeds:FeedItem uid="color" type="Dimension" values="Department"/>
						</viz:feeds>
					</viz:VizFrame>

 

Controller:

In the init() function of the Controller fetch the model 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 the Employee Count in each Department of the Organization.

Clicking the particular Slice of Donut, the data will be displayed as below.

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Somu Arumugam
      Somu Arumugam

      Cool procedures, Thanks for sharing with us.

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

      Welcome Somu 🙂

      Author's profile photo Fatih Sultan Akdeniz
      Fatih Sultan Akdeniz

      Thanks. Simple and good example

      Author's profile photo Pawan Kalyan K
      Pawan Kalyan K

      Hi Navya,

      Thanks for the example . I was trying to display a Bar Viz Chart on click of GO Button in selection screen.

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

      I was getting a invalid data binding error in place of viz chart .

      can you please click the above link and let me know what could be the problem. i have attached all my code as well .

      Author's profile photo Jaglika Perkova
      Jaglika Perkova

      Hello and thanks for your example.

      I am trying to implement a donut which is taking 1 dimension and 2 measures. So I have made a simple json model to test with it, but it seems like my donut is taking only the first element of my json model and not the whole. Strange, I have tried to implement it in the view and also in the controller but no luck.

      Author's profile photo Bollu Spandana
      Bollu Spandana

      Hi Navya,

      Thanks for sharing this blog, this is very helpful to me..

      Are you know any thing about the interactive bar chart and what is the difference between the interactive chart and viz frame…! If you worked any thing reg interactive bar chart plz share to me..

       

      Thanks,

      Spandana

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      we can make vizframe chart interactive . It has data select events to manage drill downs etc.

       

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      Any pointers here ? I see zeros as data labels on the donut, but clicking on it gives me the right data .

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      List Binding is not bound against a list for /items. getting this error

       

      Author's profile photo Fitha Zainab Zakkeer
      Fitha Zainab Zakkeer

      Thank you very much. Nice Explanation. Good and simple example