Displaying data as a vertical bar chart

Problem:

You want to display data as a vertical bar chart.

Solution:

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

Requirements

• Klipfolio Dashboard version 5.4 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.
• In version 5.4, the column to use as the bars 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. This restriction is limited only to version 5.4; from version 5.5, both the formula and content: generated settings can be used for the <series> column(s).

Overview

<setup>
    <chart>
        <type>verticalbar</type>
        <categorylabels>my_category_column_name</categorylabels>
        <series>my_number_column_name(s)</series>
    </chart>
</setup>

• The column(s) to display as bars (<series>) must be type: number.
• Each bar represents each single value in a given column. (See example 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). (See example 2)
• If the values are close to one another, it can be difficult to distinguish their differences at a glance. Use the optional setting, <scaletodata>true</scaletodata>, which will adjust the range of the chart to start from a value closer to the smallest of the currently available data, instead of 0. Note, however, that if the data values contain a 0 or both positive and negative values, this setting will be ignored. (See example 3)
• By default, no title is displayed for the y-axis. To display it, add <seriestitle>my_series_title</seriestitle> in the <chart> block. (See example 4)
• You can specify multiple column names for <series> to display their values as a multiple bar chart. (See example 5)
• A vertical bar chart can be combined with a line chart by adding <format>line(my_line_chart_column)</format>. To overlay multiple lines on the vertical bar chart, specify each line chart column using line(my_line_chart_column), e.g. <format>line(my_line_chart_column1),line(my_line_chart_column2)</format>. (See example 6)
• A full-frame bar chart Klip can be made to drill down if desired. You can drill down into an item by clicking on the bar.(See example 7)
• In a full-frame bar chart Klip that can be drilled down, the <categorylabels> should be set to the column that is type: enum; drilldown: 1.
• The y-axis for the chart and its increments are automatically generated by the application.
  • 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 bar chart Klip. 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.
• Tip: The optional settings covered in this article can be combined as demonstrated by the finished sample Klip.

Examples

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

1. A simple vertical bar chart Klip

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

2. Add the <chart> block in the Klip'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 bars (<series>).

<chart>
    <type>verticalbar</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:

You will notice that the exact value for the bar is indicated as you hover over each product. In this example, you will also see a tooltip whenever you hover over a bar; the use of tooltips is especially useful for full-frame charts because additional information about each item can be displayed. (See the style definitions in the <style> block.)

2. Suppressing the legend

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units</series>
    <legend>false</legend>
</chart>

3. Scaling the range of the chart to the data values

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units</series>
    <scaletodata>true</scaletodata>
</chart>

This will result in the horizontalbar1.klip displayed like this:

Note how the range of the chart is now adjusted to 490 to 520. Though this example uses static data, the range would readjust itself if the incoming data values were to precede or exceed the smallest and largest values that are currently available.

4. Adding a title to the y-axis

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units</series>
    <seriestitle>Units</seriestitle>
</chart>

5. Displaying multiple columns as bars

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units,orders</series>
</chart>

6. Combining a vertical bar chart and a line chart

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units,orders</series>
    <format>line(orders)</format>
</chart>

Note how both columns that are used in the chart, i.e. units for the bar chart and orders for the line chart, must be listed in the <series> block.

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units,orders</series>
    <format>line(orders),points</format>
</chart>

Here's how the verticalbar1.klip looks with the above settings:

<chart>
    <type>verticalbar</type>
    <categorylabels>name</categorylabels>
    <series>units,orders,shipped</series>
    <format>line(orders),line(shipped),points</format>
</chart>

7. A drilldown Klip

1. First, start with a regular drilldown Klip that includes the data you will want to display as a chart. Be sure to specify the formula for each of the type: number columns as required for any 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 as example 1 above: verticalbar2.klip. When loaded, it should look like this.

Try clicking on the Appliances item to drill down to see how this Klip works at this stage.

2. To turn it into a chart Klip, you will want to use the column that is type: enum; drilldown: 1 as the <categorylabels>, so that this is the level on which the chart is displayed when the Klip is loaded:

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

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

You can click on any bar to drill down into it.

You may also add the optional settings discussed above to the drill down chart Klip.