Create Dashboard

In this short guide we will use a to create a simple dashboard.


  • Project in that contains already streamed events
  • (optional) You can create a grid layout by yourself or use any of sample layouts from Keen dashboards. In this guide we will use two and one layout.


<script type="text/javascript" src=""></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 on website via embedded script.
<script type="text/javascript" src=""></script>
  • Create a layout for your dashboard.

As new KeenDataviz supports titles we need to simplify the layout from keen/dashboards, just containers for chart instance are required. The final grid for the dashboard is

  <div class="container grid grid-two-and-one">
    <div class="chart-stage" id="chart-01" style="height: 350px;"></div>
    <div class="chart-stage" id="chart-02" style="height: 350px;"></div>
    <div class="two">
        <div class="chart-stage" id="chart-03" style="height: 350px;"></div>
  • Create new KeenDataviz chart instances.

Based on metric chart interface we can adjust properties like icon or margins.

const metricChart = new KeenDataviz({
      type: 'metric',
      container: '#chart-01',
      settings: {
        theme: {
          metric: {
            icon: {
              margins: { top: 30, left: 30, bottom: 0, right: 20 },
              enabled: true,
              type: 'brand',
              style: 'regular',
        caption: 'Total purchase',
  • Define a query and render a chart widget.
      analysisType: 'count',
      eventCollection: 'mobile_purchases',
      timeframe: {"start":"2019-03-20T00:00:00+00:00","end":"2019-03-26T12:00:00+00:00"},
      timezone: 'UTC',
    .then(result => metricChart.render(result))
    .catch(error => metricChart.error(error.body);
  • Repeat last two steps for other charts.
Bear in mind that each query counts against your per-project query limit. Consider using cached queries instead.
  • Adjust and customize visualization.

Dashboard Starter Kit

Building your own white-labeled or embedded dashboard? Our open source templates are a great place to start.