Skip to Content

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.


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"


In the view define a Vizframe chart of type donut by using the below namespaces




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'}}">
							<vizData:FlattenedDataset data="{/items}">
									<vizData:DimensionDefinition name="Department" value="{Department}"/>
									<vizData:MeasureDefinition name="Employee Count" value="{EmployeeCount}"/>
							<vizFeeds:FeedItem uid="size" type="Measure" values='Employee Count'/>
							<vizFeeds:FeedItem uid="color" type="Dimension" values="Department"/>



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");




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.

You must be Logged on to comment or reply to a post.
  • Hi Navya,

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

    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 .

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

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




  • /