Embed Widget

In this short guide we will use a keen.io/dataviz to create a Line Chart widget.

Prerequisites

  • Project in Keen.io that contains already streamed events

Steps

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/keen-analysis@latest/dist/keen-analysis.min.js"></script>

Remember to freeze the package version by replacing latest tag in script url.

  • Create keen-analysis instance and configure it.
const client = new KeenAnalysis({
  projectId: 'YOUR_PROJECT_ID',
  readKey: 'YOUR_READ_KEY'
});
  • Install keen.io/dataviz on website via embedded script.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@keen.io/dataviz@latest/dist/dataviz.min.js"></script>
  • Add a HTML element on website - it will be used as a widget container.
<div id="container"></div>
  • Create a new KeenDataviz chart instance.

Based on line chart interface we could adjust properties like line interpolation or margins.

const dataviz = new KeenDataviz({
  type: 'line',
  container: '#container',
  widget: {
    title: {
      content: 'Book purchases',
    },
    subtitle: {
      content: 'Monthly results',
    },
  },
  settings: {
    margins: {
      top: 20,
      left: 45,
      right: 15,
      bottom: 30
    },
    curve: 'spline',
  },
});
  • Define a query and render a chart widget.
client
  .query({
    analysis_type: 'count',
    event_collection: 'book_purchase',
    timeframe: {
      start: '2019-08-01T00:00:00.000-00:00',
      end: '2020-02-01T00:00:00.000-00:00',
    },
    group_by: ['author'],
    interval: 'monthly',
  }).then((res) => dataviz.render(res));
  • Adjust and customize visualization.