Keen Charts Add-on

A component to render Keen IO charts in Vaadin applications

View larger

Close

Keen Charts is a Vaadin integration for Keen IO, an analytics service to easily collect, explore, and visualize data.

Usage

You don't need to recompile the widgetset in order to use this add-on. You need the project ID and the read key provided by Keen IO when you create an account at https://keen.io.

Creating a chart is pretty simple:

// define the query to be sent to Keen IO
Query query = new Query.Builder(QueryType.COUNT)
        .withEventCollection("gifts")
        .withTimeframe(new AbsoluteTimeframe("2016-08-01", "2016-08-05"))
        .withInterval("daily")
        .build();

// define the UI component
KeenChart chart = new KeenChart(projectId, readKey, KeenChartType.BARCHART, query);

layout.addComponent(chart);

For more information about the Keen IO Java API, consult the documentation at https://github.com/keenlabs/KeenClient-Java.

For more information about Keen IO, consult the documentation at https://keen.io/docs.

License

Add-on is distributed under Apache License 2.0.

Sample code

package org.vaadin.keen.charts;

import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.themes.ValoTheme;
import io.keen.client.java.AbsoluteTimeframe;
import io.keen.client.java.Query;
import io.keen.client.java.QueryType;

/**
 * A simple UI containing some KeenCharts.
 *
 * @author alejandro@vaadin.com
 */
@Theme(ValoTheme.THEME_NAME)
public class DemoUI extends UI {

    private final String projectId = "YOUR_PROJECT_ID";

    private final String readKey = "YOUR_READ_KEY";

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        KeenChart chart1 = new KeenChart(projectId, readKey, new Query.Builder(QueryType.SUM)
                .withEventCollection("gifts")
                .withTargetProperty("value")
                .withTimeframe(new AbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59"))
                .build());

        KeenChart chart2 = new KeenChart(projectId, readKey, new Query.Builder(QueryType.SUM)
                .withEventCollection("gifts")
                .withTargetProperty("value")
                .withTimeframe(new AbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59"))
                .withGroupBy("name")
                .build());

        KeenChart chart3 = new KeenChart(projectId, readKey, new Query.Builder(QueryType.COUNT)
                .withEventCollection("gifts")
                .withTimeframe(new AbsoluteTimeframe("2016-08-01", "2016-08-05"))
                .withInterval("daily")
                .build());

        KeenChart chart4 = new KeenChart(projectId, readKey, KeenChartType.BARCHART, new Query.Builder(QueryType.COUNT)
                .withEventCollection("gifts")
                .withTimeframe(new AbsoluteTimeframe("2016-08-01", "2016-08-05"))
                .withInterval("daily")
                .build());

        GridLayout layout = new GridLayout(2, 2);
        layout.addComponents(chart1, chart2, chart3, chart4);
        layout.setSizeFull();
        layout.setMargin(true);
        layout.setSpacing(true);
        setContent(layout);
    }

}

Links

• Author Homepage
• Issue Tracker
• Source Code

Compatibility