Developer
How-To Articles

Parsing data - CSV / TSV

Problem:

You want Klipfolio Dashboard to display data that is in CSV or TSV format.

Solution:

Note: This article discusses advanced features that are only available in the licensed, commercial version of Klipfolio Dashboard.

The following information applies to TSV data as well. Just replace csv with tsv.

You can specify the data source as being in CSV format through either CSS or JavaScript, whichever you are comfortable with. Stylesheet definitions are the same as with XML data source format, but note the following:

a. Your CSV data must have column names; and
b. Your stylesheet must match the column names in the CSV data.
c. For type: item, use row. (See example below.)

Option A: CSS
Add the CSS property, @parse csv to the top of your <style> block like this:


<style>
    @parse csv;
    ....
</style>

Option B: JavaScript
You may instead tell Klipfolio Dashboard that the incoming data is in CSV format by setting it in the onRefresh method before the call to Engines.Data.process().


function onRefresh() {
    Engines.Data.format = "csv";
    ...

Example
Let's take a quick look at a simple example of a Klip that uses http://support.klipfolio.com/files/qtd_rep_demo/qtd_rep_sales.php as its content source. (Though the file extension is .php, you will see that the data is comma-separated.) When you open this source, you will see something like this:

<html>

Area,Rep,Bookings,Quota,Past QTD
Austria,Wessel Van Den Berg,242601.78571429,271714,247012.72727273
Germany,Vicki Nicolai,292786.66666667,351344,327921.06666667
Norway,Venu Nair,214226.58333333,270602,249786.46153846
...
</html>

Because this data is dynamically generated, names and numbers may look different, but the column names should be the same: Area, Rep, Bookings, Quota and Past QTD. To display the Areas, Reps and Quota in the first, second and third columns, respectively, all you need to do in the <style> block is:


<style>
    @parse csv;
        row {
            type: item;
            definition: all;
        }
        Area {
            itemcol: 1;
        }
        Rep {
            itemcol: 2;
        }
        Quota {
            itemcol: 3;
            type: number;
        }
</style>

Important!
Be sure to set row as type: item to specify that each row is an item.Also, if the column name has spaces, as in "Past QTD" in the above example, be sure to add an underscore (_) when using it as a selector like this:


<style>
    @parse csv;
    
    Past_QTD {
        ...
    }

For a simple Klip using the above-mentioned CSV data source, try the Sample CSV Klip.

To leave a comment, you must sign in or register (it's free).


Comment Type:
Title:
Comment:

Parsing data - CSV / TSV

Problem:

Solution:

Leave a Comment