Happy Dashboarding

Using Datamatic charts in Klipfolio

Using Datamatic charts in Klipfolio

Datamatic is a chart editor which wraps data visualization libraries such as D3.js and ECharts, and makes them editable without needing to fiddle with the code. The good news is that it doesn’t required any prior knowledge of the visualization library while streamlining how charts are published on the web.

In this tutorial, I’m going to show how to customize a funnel chart in Datamatic and then embed it inside Klipfolio:

Datamatic Guest Blog | Funnel Chart

What is Datamatic?

Datamatic is a Google app so you’ll need to have a Google account in order to use it. You’ll also need to register for the free plan at http://datamatic.co so you can publish data visualizations on the web. Once you are registered, follow the instructions we'll send in the email to go to the editor:

Datamatic Guest Blog | Datamatic Google App Screenshot

Step 1: Create a new funnel chart in Datamatic

In the editor, select the FUNNEL chart from the list of available templates and click OK. This will bring up the following screen:

Datamatic Guest Blog | Creating a funnel in Datamatic

Now, you can play with sample data, change themes and make other customisations. In this example, I’ve changed title, theme and data.

Datamatic Guest Blog | Modifying a funnel in Datamatic

Once you are ready with your changes, click on the Publish button in the top right corner of the editor. This means your visualization is now public and available to be rendered inside Klipfolio.

Datamatic Guest Blog | Publishing funnel visualization

Step 2: Import the chart into Klipfolio

Klipfolio users will be familiar with this workflow. In case you're not, don't worry – I've included links to useful docs.

1. Create a data source

You will want some marketing data, perhaps from Google Analytics or your marketing automation system.

2. Create an HTML Template Klip

You will be using the highly flexible HTML Template to create the funnel visualization.

3. Create the data series

The HTML Template has one data series by default. The sample CSV file has two columns so we need to add another series by clicking on the + icon in the controls panel on the right side of the page.

To map CSV columns to data series, go to the Data tab and select A column for Series1 and B column for Series2:

Datamatic Guest Blog | Editing funnel in Klipfolio

Note: You can rename your series as you wish, however, this will need to be referenced correctly when connecting Datamatic chart (more details below).

4. Add in the JavaScript and HTML scaffolding

In this step, we insert in the JavaScript that is required to load the Datamatic API. All you need to do is to copy and paste the following code into the HTML Template and Script sections and use your own settings. To expose the Script section, first click on HTML Template on the component tree and then click on “Use JavaScript with this HTML Template” in the properties pane at the button.

HTML Template

[div id="datamatic-funnel-example" style="width:400px;margin:auto"][/div]

Script

// DATAMATIC CHART SETTINGS ======================== START
// Your Datamatic API KEY
var API_KEY = "XXX";
// Chart KEY
var CHART_KEY = "XXX";
// HTML element name from HTML Template section
var HTML_ELEMENT_NAME = "datamatic-funnel-example";
// name of series 1
var SERIES1_KEY = "Series1";
// name of series 2
var SERIES2_KEY = "Series2";
// chart width
var WIDTH = 400;
// chart height
var HEIGHT = 300;
// DATAMATIC CHART SETTINGS ======================== END

var vizmodules = {
        datamatic:"https://datamatic-public.github.io/api/1/api-1.0.7.js"
};
var data = this.dataModel.data;
requirejs.config({
        paths: vizmodules
});
require([vizmodules.datamatic], function() {
var datamatic = new Datamatic(API_KEY );         var chart = datamatic.chart(CHART_KEY, {
                width:WIDTH,
                height:HEIGHT
        });
        chart.render(document.getElementById(HTML_ELEMENT_NAME)).then(function(){
                chart.setData(data.map(function(item){
                  return {
                        name:item[SERIES1_KEY],
                        value:item[SERIES2_KEY]
                }
                }));
        });
});

To get your API & chart keys, go to the Publish dialog and copy paste it from the code:

Datamatic Guest Blog | Retrieving API key from Datamatic
  • new Datamatic(API_KEY)
  • datamatic.chart(CHART_KEY)

Tip 1: Changes to the HTML Template property in properties pane, rerenders the Klip. Add and remove a space to enforce a rerender, for debugging purposes.

When you rerender you chart, you should see this output in the editor:

Datamatic Guest Blog | Datamatic funnel in Klipfolio

Tip 2: If you now want to make changes to your chart, just go to the Datamatic Editor, make your changes and publish again, there is no need to change anything in Klipfolio. For example, this is the same chart with a different theme and different label settings made in the Properties panel.

Datamatic Guest Blog | Modifiying your Datamatic funnel in Klipfolio

Tip 3: You can use this tutorial to build other charts such as pie, doughnut, bar etc.

Datamatic Guest Blog | Import other types of charts into Klipfolio

For more advanced cases or custom templates, feel free to contact us at contact@datamatic.co and we’ll give you a hand.

Share