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

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

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

• 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