Overview: Displaying values in a drilldown Klip

Problem:

You want to display incoming data grouped together by category that users can drill down.

Solution:

Use the type: enum and drilldown: x properties to write a Drill Down Klip. For the columns using type: number, use the formula property.

Here are the basic steps to writing a Drill Down Klip:

1. Write a regular Klip that displays all of the data you want to present. (See Klip Development Fundamentals.) Be sure to use the formula property in the type: number columns.
2. Set type: enum on the columns that have repeating data, and drilldown: x where x is the level at which the column is to be displayed.
3. (Optional) Set <autodrilldown>true</autodrilldown> to make the Klip automatically roll up when it is loaded.

We will go through these steps in the example below. Or, you can download the finished sample Drill Down Klip instead.

Example

In the following example, we will use a static XML data source located at http://www.klipfolio.com/static/klips/samples/drilldown/data.xml.

<item>
    <city>Springtown</city>
    <region>South</region>
    <storeid>ABC</storeid>
    <oranges>100</oranges>
    <apples>60</apples>
</item>

1. Create a regular Klip
Here's a regular Klip from which we will make a Drill Down Klip. If this is your first time writing a Drill Down Klip, we recommend that you take this step to make sure that the data is being fetched and displayed before adding more settings.

city {
    type: enum;
    drilldown: 1;
    itemcol: 1;
}

region {
    type: enum;
    drilldown: 2;
    itemcol: 2;
}

storeid {
    type: enum;
    drilldown: 3;
    itemcol: 3;
}

In this example, we will leave the apples and oranges columns as they are. Because they are both type: number and use formula, they will be displayed on all levels and their values will aggregate up to the top level according to their formula settings. (You can choose to display a number column in one specific level instead. See Displaying a column in only one drilldown level for details.)

Now, save and reload the Klip.

That's it. The Klip is now a Drill Down Klip. Try right-clicking on the column header of the city column...

...and select "Rollup city", which wasn't available when it was a regular Klip.

You can click on either city to drill down into its region, then on to its stores.

<setup>
    ...
    <autodrilldown>
        true
    </autodrilldown>
</setup>    

Now, when the Klip is reloaded, it will look like this: