SAPUI5 Development

Pie Chart using VizFrame in SAPUI5


1.sapui5 framework
2.basic javascript knowledge and sap.viz library loaded 

              VizFrame is a viz control that manages a visualization’s initialization, layout, feeding, customization and interactions.VizFrame is available in sap.viz.ui5.controls library.We can see how we can create Pie chart using VizFrame.
              If you dont know how to create Bar chart using VizFrame see Bar Chart using VizFrame. 

  1. Create Application using SAP Web IDE or eclipse with a view and controller.If you dont know how to refer my previous tutorial.Application Using SAP Web IDE
  2. First inside onInit() method of the controller we will create a json model and set data to the model and set the model to the view.
    onInit: function() {
        var oModel = new sap.ui.model.json.JSONModel({
            book: [{
                "City": "New York ",
                "Cost": 295584.81,
                "Item Category": "Action Movies",
                "Profit": 173793.31,
                "Revenue": 469378.12,
                "Unit Price": 1240.79,
                "Units Available": 17336,
                "Units Sold": 57571
            }, {
                "City": "New York ",
                "Cost": 215065.45,
                "Item Category": "Alternative Movies",
                "Profit": 140874.87,
                "Revenue": 355940.33,
                "Unit Price": 1319.07,
                "Units Available": 11270,
                "Units Sold": 48552
            }, {
                "City": "New York ",
                "Cost": 115132.04,
                "Item Category": "Audio Equipment",
                "Profit": 56994.34,
                "Revenue": 172126.37,
                "Unit Price": 763.21,
                "Units Available": 11248,
                "Units Sold": 37303
            }, {
                "City": "New York ",
                "Cost": 171742.42,
                "Item Category": "Cameras",
                "Profit": 81093.4,
                "Revenue": 252835.82,
                "Unit Price": 1143.57,
                "Units Available": 14917,
                "Units Sold": 51664
            }, {
                "City": "New York ",
                "Cost": 331033.94,
                "Item Category": "Comedy Movies",
                "Profit": 150465.23,
                "Revenue": 481499.18,
                "Unit Price": 2268.02,
                "Units Available": 22449,
                "Units Sold": 69005
            }, {
                "City": "New York ",
                "Cost": 207854.46,
                "Item Category": "Country Music",
                "Profit": 115242.56,
                "Revenue": 323097.02,
                "Unit Price": 1456.91,
                "Units Available": 17996,
                " Units Sold": 45346
            }, {
                "City": "New York ",
                "Cost": 243875.22,
                "Item Category": "Drama",
                "Profit": 124653.66,
                "Revenue": 368528.87,
                "Unit Price": 1369.83,
                "Units Available": 23662,
                "Units Sold": 66737
            }, {
                "City": "New York ",
                "Cost": 294962,
                "Item Category": "Horror Movies",
                "Profit": 124668.09,
                "Revenue": 419630.09,
                "Unit Price": 1658.12,
                "Units Available": 26538,
                "Units Sold": 78528
            }, {
                "City": "New York ",
                "Cost": 20362.45,
                "Item Category": "Pop",
                "Profit": 7955.24,
                "Revenue": 28317.7,
                "Unit Price": 148.76,
                "Units Available": 6227,
                "Units Sold": 16389
            }, {
                "City": "New York ",
                "Cost": 253598.76,
                "Item Category": "Rock",
                "Profit": 141583.73,
                "Revenue": 395182.49,
                "Unit Price": 1337.09,
                "Units Available": 14801,
                "Units Sold": 579010
            }, {
                "City": "New York ",
                "Cost": 142550.68,
                "Item Category": "Soul / R&B",
                "Profit": 80381.86,
                "Revenue": 222932.54,
                "Unit Price": 1250.65,
                "Units Available": 11900,
                "Units Sold": 321511
            }, {
                "City": "New York ",
                "Cost": 174617.63,
                "Item Category": "TV's",
                "Profit": 87620.46,
                "Revenue": 262238.09,
                "Unit Price": 967.09,
                "Units Available": 16738,
                "Units Sold": 646512
            }, {
                "City": "New York ",
                "Cost": 42853.89,
                "Item Category": "Video Equipment",
                "Profit": 23242.33,
                "Revenue": 66096.22,
                "Unit Price": 209.79,
                "Units Available": 6344,
                "Units Sold": 2007
  4. Create VizFrame control inside Page control in the view and give properties.
  5. <mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds""">
            <Page title="Chart Demo">
                    <viz:VizFrame id="oVizFrame" busy="false" busyIndicatorDelay="1000" visible="true" uiConfig="{ 'applicationSet': 'fiori' }" vizType="pie" legendVisible="true">

  6. Add dataset to the VizFrame.Set dimensions and measures.
  7. <viz:dataset>
        < data="{/book}">
                < name="Item Category" value="{Item Category}" />
                < group="1" name="Revenue" value="{Revenue}" />
  8. Add feeds to the VizFrame.
  9. <viz:feeds>
        <viz.feeds:FeedItem id="value1" uid="size" type="Measure" values="Revenue" />
        <viz.feeds:FeedItem uid="color" type="Dimension" values="Item Category" />
  10. All set now place the view at content div(Needed when using jsbin).Its automatically done when using IDE
  11. Output chart will look like this.
  12. See sample code in jsbin     

  13. Pie chart in XML View
    Pie chart in JS View
If you enjoyed this post, Please Share!!


  1. Hi,

    How can I edit the "Title of the chart"?

    1. You can make use of 'vizProperties' property of control vizframe to achieve this.See the below sample.
      Title of Chart

  2. How Can i add more feed item on select? like adding City and Profit?

    1. Hi,
      You can remove the feeds and dataset and set it again.
      see sample change feeds

  3. how to execute without index?

    1. Without What ?If you need the chart without showing legends, you can make use of property 'legendVisible':false

  4. How can add below chart table, I need to show table data below chart

  5. Each variant will differ in a couple of of} ways to make your cellular expertise thrilling. You will find traditional options similar to European roulette and American roulette that comply with the same guidelines aside from the number of 0s on the table. There’s pinball roulette that doesn’t make use of a 솔카지노 wheel in any respect however still uses the same fundamentals as European roulette. And there’s multi-wheel roulette that’s perfect for gamers who would like to take pleasure in a fast-paced expertise by placing bets on multiple of} wheels at once. Just remember to learn through the bonus phrases of the provide you’re considering as the location requires gamers to make use of El Royale Casino promo codes find a way to} declare a bonus.


Powered by Blogger.