Introducing other chart types

Now, we should be more familiar with the process of creating a dashboard. In this section, we will go through the chart types that we have in SAP BO Dashboards, and we will focus on the column and bar charts as we will need them to create our eFashion dashboard project. We will cover the following dashboard components:

• Line, column, bar, and column line charts
• Bubble and scatter charts
• OHLC and Candlesticks charts
• Bullet charts
• Radar chart
• Tree map (heat map)

The column line chart is renamed in SAP BO Dashboard 4.1, and it was combined chart in the earlier releases.

Line, column, bar, and column line charts

Line chart can be used to show the relation between one dimension and one measure. This type of charts is perfect in a trend analysis when you want to display time trends, such as the sales by months. The main idea of this chart is to display a continuous line that reflects how our measure (sales in our example) changes across dimension values (months in our example).

Tip

We can blindly select line charts when we want to display a time-based trend analysis.

We can empower a line chart by displaying more than one line (series). New series can be measure distributed on another dimension (such as the sales trend) by product, or another measure (such as target) that we want to compare our main measure with. We can see this in the following screenshot:

The column and bar chart are the same except the difference in the way they display the data. Bar charts are horizontal, and column charts are vertical. We can use it to compare multiple dimension values based on one metric, such as sales per brand, as we can see in the following screenshot:

The column and bar chart can be used to show the relation between multiple series, so for example, we may have a column chart that gives the distribution of sales per product against region. In this case, we will create multiple series for region dimension, and we will use legend and color to differentiate between them.

There are two other versions of bar and column chart called stacked bar and stacked column chart. In this dashboard component, we display one stacked bar instead of side-by-side bars, as we can see in the following screenshot:

A column line chart is a combination of column and line charts. We can use a combined chart to show the relation between two measures such as sales and quantity, for example, with two different scale or axes. Indeed, we can't represent sales and quantity using the same scale, so we can't use the column or bar charts to do this.

We will create a combined chart as it is part of eFashion dashboard project:

1. Activate the Components panel.
2. Drag and drop a Column Line Chart component from the Component panel to the canvas.
3. Activate the General tab for the combination chart from the Properties panel.
4. Select By Series in the General tab under the Data section.
5. Click on the small (+) icon under series to create two series. Use the information in the following table to map the series information:
   

We need to note the following:

• Category Labels(X) are shared between the chart series.
• We mapped some extra empty cells in our values and category labels. I did this on purpose to learn how to handle the missing chart values at runtime.
• Series1 will display the sales information on the primary axis, and series2 will display the quantity information on the secondary axis.

Let's continue with our chart:

1. In the General tab, map the following properties to the corresponding Excel model cells, as per the following table:
   

   Tip

   The best practice is to keep titles and labels in a separate Excel sheet inside our model. This will keep our dashboard design more organized, easy to maintain, and can be understood the other developers.

We can see the discussed steps in the following screenshot:

We can see the combination chart in the following screenshot:

Now, let's change some properties to enhance the chart's look and feel:

1. Make sure that the combination chart is selected, and then navigate to the Properties panel.
2. Navigate to the Behavior | Common tab.
3. Under Ignore Blank Cells, select In Series and In Values.
4. Check the Enable Rang Slider option.
5. In the Primary Scale and Secondary Scale tabs, select Fixed Label Size.
6. In the Appearance | Layout tab, check Enable Hide/Show Chart Series at Run-Time option.

   Tip

   You will be able to see the Primary Scale and Secondary Scale tabs only if you configured one of the series to be plotted on the secondary axis. If all series is plotted on the primary axis, then only one tab Scale will be there.

   We can see the steps in the following screenshot:

   

   We can see the combined chart in the following screenshot:

   

Finally, we need to discuss some of the features that we used to enhance our combined chart:

• Ignore Blank Cells: This option will allow the chart to handle the missing data at end of range only. The In Values option will handle the missing data in values by not displaying any product with no, or null, values if it comes at the end of the range. While the In Series option will handle the missing values in series by not displaying the series with no data. This property can be configured for almost all charts and selectors.
• Enable Range Slider: This option will display a slider at runtime that can be used to control the range of the displayed dimension values. It is also useful if we want to focus on a subset of the displayed products, for example, rather than all of the products. This property can be configured for line, bar, column, and combination chart.
• Enable Hide/Show Chart Series at Run-Time: This option will help us show and hide series at runtime to compare one or more series, rather than to compare all of them.

We can see the Sales series only in the following screenshot because we disabled the Quantity measure at runtime. We can also see that we used the range slider to focus on Sweaters, Shirt Waists, and Dress products only.

Next, we will discuss Bubble and Scatter Chart.

Bubble, scatter charts, and tree maps

Scatter chart can be used to show a relation between two variables (metrics) using dots. A bubble chart is exactly same as scatter chart, but it can be used to show the relationship between three variables. The relation between first two variable will also be presented by the coordinates of a dot on the chart, while the third variable will be presented by the dot size.

Tree map is a set of rectangles of different sizes which can also be used to show the relation between two variables, the same as scatter chart. The difference that the tree map will use the rectangle size and color intensity to show the relation instead of the scatter coordinates for the dots.

We can see how Bubble, Scatter, and Tree Map charts will look like in the following screenshot:

Now, we will build a bubble chart to show the manager's performance based on the revenue, discount, and margin:

1. Drag a bubble chart from the component panel and drop it on any empty space on the canvas (the Dashboard tab).

   Tip

   Use the Object Browser panel to hide the combination chart and pie chart by clicking on the corresponding eye symbol if you don't have space.

   We can also use the Lock symbol to lock the marked object and prevent any changes till we release (un-tick) the lock again.

   We can see the Object Browser panel in the following screenshot:

   
2. Navigate to General tab under the Properties panel and map the bubble chart titles to the corresponding Excel model cells under Titles sheet, as we can see in the following screenshot.
3. Create six series and start mapping the Name, Value(X), Value(Y), and size to the corresponding manager name, revenue, discount, and margin, as we can see in the following screenshot.
4. Adjust the scale from Behaviour tab by setting Fixed Label Size, as we did in the last combination chart.

   We can see the steps in the following screenshot:

   
   • Exercise: Try to enable Data Labels on the bubble chart in order to give it a meaning if we printed in a grayscale.
   • Exercise hint: Use Data Labels under the Appearance tab.

OHLC and candlestick charts

OHLC and candlestick charts can be used to display stock price information over time. The stock price has four main values across the day; these are open price, high price, low price, and closing price (OHLC). We can have a full picture of stock price performance during a specific day by displaying these four values.

We can see how to draw OHCL and candlestick charts for the mentioned stock price:

We can see same stock price information by date presented on OHLC and candlestick charts in the following screenshot:

Exercise: Try to create an OHLC chart based on the stock excel sheet under Example Code | Data | Excel | Stock.xls

Bullet charts

The bullet chart is another version of the bar and column chart developed by Steven Few to replace dashboard' single value components, such as gauge and meters. The main problem with gauge and meters is that they consume large space and deliver small values from the information that we have. The bullet chart can display the following four metrics per bar:

• Actual (Performance)
• Target (Comparative)
• Lower scale
• Upper scale

We can see an example of a bullet chart in the following screenshot:

Radar charts

A radar chart can be used to represent different factors that can be used to measure something. For example, we may use the following factors: price, shipping time, average rating, and quality to measure a product. We have two types of radar charts:

• Radar Chart
• Filled Radar Chart

We can see a Radar Chart example in the following screenshot: