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. Create VizFrame control inside Page control in the view and give properties.



  4. Add dataset to the VizFrame.Set dimensions and measures.


  5. Add feeds to the VizFrame.Note the difference in uid .


  6. All set now place the view at content div(Needed when using jsbin).Its automatically done when using IDE
  7. Output chart will look like this
  8. See sample code in jsbin       

  9. dual bar Chart XML view
    dual bar Chart JS view
 
If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon

0 comments :

Post a Comment

Powered by Blogger.