Keen Charts Add-on
A component to render Keen IO charts in Vaadin applications
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);
Use your own values for PROJECT_ID and READ_KEY.
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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2016-08-06
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.0+
- Browser
- N/A
Keen Charts Add-on - Vaadin Add-on Directory
A component to render Keen IO charts in Vaadin applications``` // 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); ```
Use your own values for PROJECT_ID and READ_KEY. For more information about the Keen IO Java API, consult the documentation at