Displaying values as slices in a pie chart

Problem:

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

Solution:

The examples below will walk you through the steps to create Klips with full-frame pie charts using example Klips. You can also download a finished sample Klip instead.

Requirements

• Klipfolio Dashboard version 5.3 or above.
• The column to use as the bars (<series>) must be type: number.
• The columns to be used as the category labels and series in the chart must first be defined in the <style> block as demonstrated in the sample Klips; otherwise, the data contained in those columns cannot be retrieved from the data source.
• The column to use as the slices in the pie chart can use formula: sum or formula: average, but it cannot be content: generated. This means that the values in the <series> column must not be a result of a mathematical formula that uses values from other columns in the Klip.

Overview

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

• The column to display as the slices of the pie chart (<series>) must be type: number.
• Each slice represents each single value in a given column; a full-frame pie chart cannot be made from comma-separated values.
• A full-frame pie chart Klip can be made to drill down if desired. In it, you can drill down into an item by clicking on a slice.(See example 2)
• In a full-frame pie chart Klip that can be drilled down, the <categorylabels> should be set to the column that is type: enum; drilldown: 1.
• The legend is displayed by default. You can prevent it from being displayed by 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: As demonstrated in the examples below, start by creating a Klip that displays the data as numeric values before adding the code to make it into a full-frame pie chart. This way, if you have any problems with the chart, you can safely assume that the data retrieval is not the cause of the problem.

Examples

The following examples use a static XML file located at http://www.klipfolio.com/static/klips/samples/piechart/data.xml as their content source.

1. A regular Klip

1. Build a Klip with the data you will want to display as a full-frame pie chart. For example, here is a Klip displaying data on 10 products that looks like this when it is loaded: piechart1.klip

2. Add the <chart> block in the Klips's <setup> block. In it, specify the <type> of the chart, the name of the column to use for the <categorylabels>, and the name of the column to display as slices (<series>).

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

Note that we use the names of the columns as specified in the <style> block, which are case sensitive. The Klip should now look like this:

When you hover over a slice, the corresponding item in the legend will be highlighted, and vice versa.

2. A drilldown Klip

1. Make a drilldown Klip. (For details, refer to the how-to article, Displaying values in a drilldown Klip.)

For example, here is a drilldown Klip using the same content source the example above: piechart2.klip. When loaded, it should look like this.

Try clicking on the Appliances item to drill down.

2. If you add the same <chart> block as in the previous example, this Klip will look exactly the same (except for the Klip's title) because it is using the same columns for <categorylabels> and <series>:

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

Now, the Klip should look like this, with 4 categories when it is loaded:

You can click on any category drill down into it. For example, clicking on the bar for Appliances will result in this: