SAPUI5 Development

Dual axis chart using VizFrame in SAPUI5?

                  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.It support dual axis feature.
                   We may need 2 y axis in our VizFrame charts in some scenarios where two variables have nasty difference in their scales.In this tutorial we will see how to create dual axis or 2 y-axes chart using VizFrame library.


Pre-requisites

1.sapui5 framework
2.sap.m and sap.viz library loaded 


Steps
  
  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.
  3.  
    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": 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
                        }]
        });
        this.getView().setModel(oModel);
    }
    
  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" xmlns:viz.data="sap.viz.ui5.data">
     <App>
      <Page title="Chart Demo">
       <content>
        <viz:VizFrame id="oVizFrame" busy="false" busyIndicatorDelay="1000" visible="true" uiConfig="{ 'applicationSet': 'fiori' }"
              vizType="dual_bar" legendVisible="true"
              vizProperties=" 'plotArea': { 'secondaryScale': { 'fixedRange': true, 'minValue': 0, 'maxValue': 30000 } }">
        </viz:VizFrame>
       </content>
      </Page>
     </App>
    </mvc:View>
    

  6. Add dataset to the VizFrame.Set dimensions and measures.
  7. <viz:dataset>
        <viz.data:FlattenedDataset data="{/book}">
            <viz.data:dimensions>
                <viz.data:DimensionDefinition name="Item Category" value="{Item Category}" />
            </viz.data:dimensions>
            <viz.data:measures>
                 <viz.data:MeasureDefinition group="1" name="Revenue" value="{Revenue}" />
                 <viz.data:MeasureDefinition group="1" name="Units Available" value="{Units Available}" />
            </viz.data:measures>
        </viz.data:FlattenedDataset>
    </viz:dataset>
    
  8. Add feeds to the VizFrame.Note the difference in uid .
  9. <viz:feeds>
       <viz.feeds:FeedItem id="value1" uid="valueAxis" type="Measure" values="Revenue" />
       <viz.feeds:FeedItem id="value2" uid="valueAxis2" type="Measure" values="Units Available" />
       <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Item Category" />
    </viz:feeds>
    
  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. dual bar Chart XML view
    dual bar Chart JS view
 
If you enjoyed this post, Please Share!!

7 comments :

  1. Hi - Is it possible to overlap the bars of two series ?

    ReplyDelete
    Replies
    1. how? Can you paste a screenshot of your requirement?

      Delete
  2. hi,

    There is requirement in my app for dual y axis ..how can we archive this scenario ,I am using VizFrame charts for line graph.

    Please help me out.

    thanks to you

    ReplyDelete
    Replies
    1. For line graph just use dual_line chart type . see sample

      Delete
    2. http://jsbin.com/tijuzohumu/1/edit?html,output

      Delete
  3. Hello,

    I have understand the both Stacked Row and Stacked Column chart. but here i have a different thought to implement.

    is it possible to make dynamic Stacked Column chart. if we go to in details of what i am asking is, is it possible to give measures dynamically.

    ReplyDelete

Powered by Blogger.