SAPUI5 Charts:Combination chart using sap.makit library


1.sapui5 framework loaded library loaded.
      We have seen how to make a simple chart using SAPUI5 makit library.If you haven't please find my other posts.(SAPUI5 charts:simple chart using makit library).
       Now we will create a combination chart using SAPUI5 makit library.Combination charts allow multiple layers of a graph to share the same category,but have their own values and series grouped and drawn in different styles.
      A combination chart consist of two components:   
  1. sap.makit/CombinationChart control
  2. sap.makit/Layer element 
      To create a combination chart,first create a 'CombinationChart' control and add multiple 'Layer' elements.First element is the container and second element is the each Layer element is a chart.The root element's properties are shared by all layers.
  1. First step is to include sap.makit library in index.html file.Hope you already did that.

  2. First we will get data for the Chart.You can Get Data from Odata Service.Here I am using custom data.Our Data Looks like below. 

  3.  Create combination chart control.Set width and height.Also Define categoryRegions.

  4. Create the layers.Here set chart type,define the values regions,define series regions,define columns data.We will define columns data after creating layers.

  5. Bind data to the layers.This step is important because each layer should have its own data.

  6. Add layers to combination chart.

  7. Add combination chart to page control.Add page to App control and place it.

  8. See it in Action.Hope you likes this post.

  9. Combination chart using makit library
If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon


Post a Comment

Powered by Blogger.