In this modern world, everyone wants the Charts and components to be customized and to play it in their way. Most importantly in the space of data visualization and analytics, it would be convenient to convey the facts easily if we combine one or more chart types together. In this blog, let’s take a quick look at how to combine a line series with bubble chart type with the help of VBX Bubble chart and script box component. This option is not limited to Bubble chart, with few modifications to the code, we can add this reference line series to most of the charts available in the VBX Package.

On a quick note, bubble chart uses three measures – One on the X-Axis and second measure on the Y-Axis and the third measure can be used to visualize in the form of the bubble size. In the example below, the Sales Amount is mapped to X-Axis, Profit/Loss to the Y-Axis and Quantity as bubble size.
combining-line-series-bubble-chart-sap-lumira-designer

 

Whereas, line series is represented by a series of values connected with a straight line.

Consider this example, wherein a Regional Manager would like to evaluate the performance of difference stores located in his region which meets at least 1% profit. Adding a reference line series, in this scenario, will help the Manager to easily identify the store which performs better and satisfies this condition.

combining-line-series-bubble-chart-sap-lumira-designer

To add this line series to the Bubble chart in SAP Lumira Designer Using Visual BI Extensions (VBX), navigate to the Outline Pane and add Script Box Component from Utilities Category to the canvas first. This simple, yet powerful component allows us to call JavaScript codes inside the Lumira Designer easily.
combining-line-series-bubble-chart-sap-lumira-designer

combining-line-series-bubble-chart-sap-lumira-designer

As next step, please navigate to “On Result Set Changed” event on the Data source component which is mapped to the Bubble Chart and add the following script in it.
combining-line-series-bubble-chart-sap-lumira-designer

 

We can also add more data points to the line series by adding x & y values in the above code.

 

Additional useful references: Implementing Reference lines in SAP Lumira Designer. Learn more about Visual BI’s SAP Lumira Offerings here.

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com