Adding our first chart component (pie chart)

Now, we are ready to build the model phase, as we have already imported the data and prepared our canvas. We will start by adding a pie chart to show the sales revenue per product line. We will learn how to add the pie chart component to our dashboard. Then, we will learn how to link it with the data in Excel model and how to change the pie chart properties. Finally, we will learn how to handle the missing data in our data ranges while displaying our chart. We can see the steps in the following screenshot:

Pie charts can be used to show a relation between one dimension and one measure. The chart will show the measure distribution across dimension values. The arc size will normally be determined based on the metric quantity percentage.

We need to adhere to the following best practices while working with a pie chart:

• The total number of distinct values for your dimensions is less than or equal to five. The more distinct values you have for your dimension, the harder it is to read and understand the pie chart.
• Try to select simple colors, which are not only comfortable for the eyes, but can also be easily identified.
• Try to display the percentage, value, and category label in the pie chart because this will help if printed in a grayscale. This will also help if your pie chart arcs are very close in size, like the one given later.
• Don't use a pie chart if you have more than one dimension. For example, if you want to see products' sales by region, then use a column chart.
• Alerting feature is not available for a pie chart, so you can just use it for comparison but not for alerting and indication.
  

Let's perform the following steps to add a pie chart to our dashboard:

1. Open the dashboard .XLF file that we created together in Chapter 2, Understanding the Dashboard Creation Process. The file should be just an empty dashboard canvas, but the Excel model is already loaded with the data that we imported together. If you didn't work out this, then navigate to Example code folder | Dashboards (Ready) | Chapter2.XLF
   

Before adding a component, we need to add a tab set container. Then, we need to create three tabs, as follows:

• Dashboard
• Analysis
• Details

The dashboard should look like:

Activate the Dashboard tab, then we need to:

1. Activate the Components panel.
2. Drag and drop a Pie Chart component from the Component panel to the canvas, as shown in the next image:
   

We can see the Pie Chart dashboard component on the canvas with the default settings, such as title and subtitle, as displayed in the following screenshot:

In the next section, we will learn how to link it with the data.

Linking the chart with data

Adding a chart to the canvas will add an empty dashboard component with the default settings. We need to link our chart with the data to display it on the chart. We need to perform the following steps to link it with the data:

1. Select the Pie Chart, or make sure that it is the active dashboard component.
2. Navigate to the Properties panel.
3. Navigate to data area in the Values: section, and click on the select a range icon.
4. Select the following range Product!$D$4:$D$15.
   

In the preceding image, note that the data is displayed on the pie chart, but because we didn't map the labels, they are displayed as 1, 2, 3, and so on. So, let's map the labels:

1. In the Labels field, select the following range Product!$C$4:$C$15.
2. Drag the chart to the middle of the canvas and note how the chart will snap to the grid. This will help us to control the layout of our dashboard's components.
3. Click on the Preview button to display the chart exactly as it will appear at runtime.

   The chart should look like the following:

   

As we can see, a pie chart is the worst choice to display the sales by product line, as we have more than 12 product lines and the colors already mixed up. In the following section, we will learn how to improve this. We will find out together that bar or column chart is the best chart to display the sales by product information while introducing other chart types.

Configuring the main chart properties

Adding a chart component will use the default component settings. We can configure chart properties such as colors, text, fonts, behavior, and many other configurations to control the look and feel of our dashboard component. We will learn how to do many configurations, and how this will affect each dashboard components, through our book.

The next step after linking our chart with the data is to configure the main chart properties. Here, we will learn how to do things that are common among many chart types.

So, let's configure our pie chart:

1. Select our Pie Chart to make it active.
2. Then, go to Properties panel | General tab.
3. Type Sales by Product Line in the Title field.
4. Map Subtitle field to the Excel cell Product!$D$3.

   We can see the steps as displayed in the following screenshot:

   

Note: Whenever you see the icon, click on it and map the value of it to a cell in the Excel model. If the background of the property is white, then you can type or enter manual value as well. The property with gray background indicates that you can use the icon only to map it to a cell in Excel.

Now, let's perform the following steps to find out how to enable sorting by data or category labels:

1. Select the Pie Chart to make it active.
2. Then, go to Properties panel | Behavior | Common tab.
3. Tick Enable Sorting.
4. Select By Data and Descending order.

   You can see the steps in the following screenshot:

   

You can also enable sorting by category labels, which will sort the data based on the alphabetical order of the dimension values. You can also check "Reverse Order" to do the same but in descending order.

Note

The feature (enable sorting) is available in most of the chart types.

Now, let's try to remove the legend and enable Data Labels as follows:

1. Navigate to Appearance | Layout under Pie Chart properties.
2. Remove the tick mark beside Enable Legend.
3. Then, navigate to Appearance | Text.
4. Check Data Labels.
5. In the position property, select Outside with Leader.
6. In the Label Contains property, select Category and Percentage.

   We can see the steps in the following screenshot:

   

So, as we can see, there is no way to display the sales by product using a pie chart in a simple and readable way.

Tip

If you have a case like this and still want to display the data using a pie chart, then you can display the top five dimension values based on their sales and group the remaining values under one category, "Others". This can be done from the presentation layer side (Universe) or from the query side, as we will discuss in Chapter 9, Retrieving External Data Sources.

We can see the previously mentioned hint applied in the following screenshot: