Creating Pie and Donut Charts in SAPUI5 with VizFrame: View and Controller Bindings

[AniketRanjan]

Introduction

Visualizing data through charts can enhance the user experience and make data insights more accessible. In SAPUI5, we can leverage sap.viz.ui5.controls.VizFrame to create various types of charts, such as Pie and Donut charts, using JSON data. This post will guide you through the setup and implementation of Pie and Donut charts using VizFrame in an XML view with data bindings in both the view and the controller.

Prerequisites

Ensure you have SAPUI5 included in your project setup and sap.viz libraries loaded.

Project Structure

Here’s a quick overview of the structure for this example:

• View1.view.xml: Contains the XML view with Pie and Donut charts.
• View1.controller.js: Holds the controller logic to load data and set up the VizFrames.
• Data.json: Sample JSON data to populate the charts.

  Step 1: Sample Data

  First, create a JSON file (model/Data.json) with sample data to populate our charts.

  json

  { "items": [ { "Category": "A", "Value": 10 }, { "Category": "B", "Value": 20 }, { "Category": "C", "Value": 30 } ] }

  Step 2: XML View Setup

  Define both the Pie and Donut charts in the XML view. Bind the Pie chart using controller logic, and bind the Donut chart directly in the view.

  View1.view.xml:

  xml

  <mvc:View controllerName="wizframe.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"> <Page id="page" title="Pie and Donut Charts"> <content> <!-- Pie Chart with Controller Binding --> <viz:VizFrame id="idPie" vizType="pie" width="100%" height="300px"> </viz:VizFrame> <!-- Donut Chart with Binding in the View --> <viz:VizFrame id="idDonut" vizType="donut" width="100%" height="300px"> <viz:dataset> <viz.data:FlattenedDataset data="{/items}"> <viz.data:dimensions> <viz.data:DimensionDefinition name="Category" value="{Category}" /> </viz.data:dimensions> <viz.data:measures> <viz.data:MeasureDefinition name="Value" value="{Value}" /> </viz.data:measures> </viz.data:FlattenedDataset> </viz:dataset> <viz:feeds> <viz.feeds:FeedItem uid="size" type="Measure" values="Value"/> <viz.feeds:FeedItem uid="color" type="Dimension" values="Category"/> </viz:feeds> </viz:VizFrame> </content> </Page> </mvc:View>

  • The idPie chart will be bound in the controller.
  • The idDonut chart directly binds the model data in the XML view.

    Step 3: Controller Setup

    In the controller, load the JSON model and configure the Pie chart properties.

    View1.controller.js:

    javascript

     

    sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap/viz/ui5/controls/common/feeds/FeedItem", "sap/viz/ui5/data/FlattenedDataset" ], function (Controller, JSONModel, FeedItem, FlattenedDataset) { "use strict"; return Controller.extend("wizframe.controller.View1", { onInit: function () { // Load sample data from JSON file let sampleData = new JSONModel("model/Data.json"); this.getView().setModel(sampleData); // Configure the Pie chart let oVizFrame = this.getView().byId("idPie"); oVizFrame.setVizProperties({ plotArea: { colorPalette: d3.scale.category20().range(), dataLabel: { visible: true } }, tooltip: { visible: true }, title: { text: "Pie Chart" } }); // Define Dataset for the Pie chart var oDataset = new FlattenedDataset({ dimensions: [{ name: "Category", value: "{Category}" }], measures: [{ name: "Value", value: "{Value}" }], data: { path: "/items" } }); // Attach Dataset and Model to the Pie chart oVizFrame.setDataset(oDataset); oVizFrame.setModel(sampleData); // Define and add Feeds let oFeedSize = new FeedItem({ uid: "size", type: "Measure", values: ["Value"] }); let oFeedColor = new FeedItem({ uid: "color", type: "Dimension", values: ["Category"] }); oVizFrame.addFeed(oFeedSize); oVizFrame.addFeed(oFeedColor); } }); });

    •