This blog series is about leveraging R Visualizations in SAP Analytics Cloud. In this blog, we will explore how to add visualizations inside tooltips to engage the dashboard users with customized interactivity. This powerful feature of having a visualization within a tooltip can be achieved in the SAP Analytics Cloud using the ‘Highcharter’ package in R Visualization. This allows you to place rich, cutting-edge visualizations into tooltips, revealing them on-hover of individual marks. The data point you hover on filters the underlying data in the embedded charts to provide a confined picture of the data.

Advantages of having visualization within a tooltip

A visualization within a tooltip is a splendid way to augment your dashboards and to avoid clutter. If you need to add a few dimensions or measures to your perfectly designed dashboard, do not worry about changing the entire design of the dashboard instead you can use this custom tooltip feature and show that additional info in visualizations inside the tooltip. This way, you can save space too. This also makes the dashboard more interesting and the user will be excited to explore more and dive deep into the analysis.

Visualization within tooltip

Let us see how to add customized visualizations within the tooltip. You can see the powerful customized tooltip having a visualization inside it in action below.

R Libraries used

• Highcharter library

Highcharter is an R wrapper of Highcharts JavaScript library. Highcharts is a very simple API yet it provides more advanced features and is very flexible too. It has a wide range of visualizations and interesting customized interactivity for those visualizations. Highcharter brings all the powerful Highcharts visualization capabilities with a simple configuration syntax.

• Tidyverse library

The Tidyverse is a collection of R packages designed for data wrangling and data science. We use this package to transform our input data frame to a format accepted in Highcharts visualizations.

The main visualization here shows a bubble chart with city grouped by country over profit and discount %. The size of the bubble correlates to the sales amount. Let us see how to build the trend ‘Profit by Year’ inside the tooltip for each city bubble. This allows you to analyze the correlation between profit and discount % in each city and the relevant additional info – profit trend for each city can be inferred from the trend chart inside the tooltip.

Initializing the Data Frame in R Widget

Add R visualization widget to your canvas and select a data source. And add rows and columns to the Input Data section. To know more about creating and adding data frames, check here. Select the required fields, in this case– Country, City and Year dimensions and Profit, Discount % and Sales amount measures.

Adding R Script

After the initial Data Frame has been set up, use the Edit Script option from the Builder pane to set up R script to visualize the data. First, we need to transform the data frame to the required format using below R script.

data.frame(), tbl_df(), arrange(), desc(), distinct(), select(), nest(), mutate(), map(), left_join() are some of the functions in the Tidyverse package we use for transforming our data to the required format supported in Highcharter Bubble Chart. You can learn more about the Tidyverse package here. And then using that transformed data, create a bubble chart for city grouped by country over profit, discount measures and the sales amount measure provides the size of bubbles.

Customizations

• hchart()- this generic function can create various R objects on the fly. You must pass the data and choose the type of chart. In our case, ‘point’ is for the bubble chart type and then define the aesthetic mappings for each variable in ‘hcaes()’ function. In this scenario, ‘x’, ‘y’, ‘name’, ‘size’, ‘group’ variables for bubble chart need to be defined.
• hc_colors()- this function is used to set colors to Highcharter objects.
• hc_tooltip()- is used to set tooltip options for Highcharter objects. It allows us to render any kind of HTML inside the tooltip.
• tooltip_chart()- This is the most significant function for adding visualization inside tooltips. This helper function in Highcharter R package allows us to have any kind of visualization inside the tooltip and to reveal them on hover of individual marks. This function should be used for the ‘pointFormatter’ argument value with ‘useHTML’ argument value as ‘TRUE’ inside ‘hc_tooltip’. In this function for ‘accessor’ argument, you need to specify the transformed data frame name.

Now you can save the application and run it. You will be able to see the cool customized tooltip, which is getting rendered when you hover the individual bubbles. By this, you will be able to infer the profit trend for each city in addition to the correlation between profit and discount %.

Some more examples for rich customized tooltips having visualizations inside it are below,

These splendid visualizations are also created in SAP Analytics Cloud using R visualizations. In subsequent blogs of this series, we will continue to learn more about leveraging R Visualizations in SAP Analytics Cloud.