dashboards

Dashboards by Keen IO

Building an analytics dashboard? Don’t start from scratch. Grab one of our CSS Grid-based templates and admire your data in minutes.

UPDATE: All examples in this repo have been updated to use keen-dataviz.js and keen-analysis.js, as well as CDN versions of all dependencies. When producing charts with keen-dataviz.js, the HTML wrapper for each chart (.chart-wrapper, described below) is rendered automatically.

Begin with a layout:

Add charts to each chart-stage HTML element:

<div class="grid-hero">
  <div class="hero chart-wrapper">
    <div class="chart-title">
      Chart Title
    </div>
    <div class="chart-stage">
      <div id="grid-1-1">
        <!-- chart goes here! -->
      </div>
    </div>
    <div class="chart-notes">
      Notes about this chart (optional)
    </div>
  </div>
</div>