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

• Embed a keen-analysis client script on website.

<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.