Create Dashboard

In this short guide we will use a keen.io/dataviz to create a simple dashboard.

Prerequisites

  • Project in Keen.io 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.

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>
  • 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>
    </div>
  </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.
  client
    .query({
      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.

Layout Templates