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.
Steps
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
- 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
- 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.
- Create VizFrame control inside Page control in the view and give properties.
- Add dataset to the VizFrame.Set dimensions and measures.
- Add feeds to the VizFrame.Note the difference in uid .
- All set now place the view at content div(Needed when using jsbin).Its automatically done when using IDE
- Output chart will look like this
- See sample code in jsbin
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); }
<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>
<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>
<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>
dual bar Chart XML view
dual bar Chart JS view
If you enjoyed this post, Please Share!!
Hi - Is it possible to overlap the bars of two series ?
ReplyDeletehow? Can you paste a screenshot of your requirement?
Deletehi,
ReplyDeleteThere 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
For line graph just use dual_line chart type . see sample
Deletehttp://jsbin.com/tijuzohumu/1/edit?html,output
DeleteHello,
ReplyDeleteI 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.
try using setDataset method
Delete