Displaying values as slices in a pie chart

Problem:

You want to display the values in a column as a pie chart.

Solution:

Note: This article uses advanced features that are only available in the business version of Klipfolio Dashboard. Add <enterprise>true</enterprise> in your <setup> block in order to try them in Klipfolio Personal Dashboard.

Starting from Klipfolio Dashboard version 5.3, you can display the numerical values in a column as slices of a pie chart. The syntax is as follows:

<setup>
    <chart>
        <type>pie</type>
        <categorylabels>my_category_column_name</categorylabels>
        <series>my_number_column_name</series>
    </chart>
    ...
</setup>

Before we look at some examples, note the following rules and restrictions:

• The column to use as the slices in the pie chart must be type: number.
• Each slice of the pie represents a single value of each item in the specified column; a pie chart cannot be made from comma-separated values of an item.
• The column to use as the slices in the pie chart must not be content: generated. This means that the values in that column must come straight from the content source and not as a result of a mathematical formula.
• You can make a pie chart Klip a regular Klip or as a drilldown Klip.
• A pie chart Klip can also use drilldown if desired.
• If you are making a pie chart Klip with drilldown, the <categorylabels> should be set to the column that is type: enum; drilldown: 1. By clicking on a slice, you can drill down into that slice. See example 2 below.
• The legend is displayed by default. You can prevent it from being displayed adding <legend>false</legend> in the <chart> block. Users will still have the option to turn it on manually through the Klip's menu (Display Settings > Show Chart Legend).
• Tip: Start by creating a Klip that displays all the data before adding the code to make it into a pie chart Klip. This way, if you have any problems with the pie chart Klip, you can safely assume that it is with the additional code that is causing it.

Example 1 - a regular Klip

Let's say you have a Klip displaying data on 10 products in a Klip called piechart_example1.klip as shown below:

To display each item in a pie chart using the Products as the category labels and values in the Units column as slices in a pie, add the following code in the <setup> block of the Klip, save and reload it:

<chart>
    <type>pie</type>
    <categorylabels>name</categorylabels>
    <series>units</series>
</chart>

The Klip will now display the content of the name column (with the label: "Product") as the categories, and values under the units column as slices of the pie and as the values in the legend:

You will notice that, when you hover over the product names in the legend, the corresponding slice will be highlighted. And if you hover over a slice in the pie, the corresponding item in the legend will be highlighted. Any style settings for tooltips are respected as well.

Example 2 - a drilldown Klip

Now, using the same content source as example 1 above, let's take a look at piechart_example2.klip, a drilldown Klip:

If you add the same <chart> block as example 1, this Klip will look exactly the same because it is using the same columns for <categorylabels and <series>:

However, if you'd like to make it into a drilldown pie chart, you could use the category column as the <categorylabels>:

<chart>
    <type>pie</type>
    <categorylabels>category</categorylabels>
    <series>units</series>
</chart>

Now, the Klip will look like this, with 4 categories at the first drilldown level as seen in the original drilldown Klip:

You can click on any category slice in the pie or in the legend to drill down. For example, drilling down into Appliances will result in this:

Note that, just like in the original drilldown Klip, you can drill back up using the Back button in the Klip's title bar.