keen/dashboards

★ 11,034HTMLAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((dashboards))
    What it does
      Layout templates
      CSS Grid resize
      Chart placeholders
    Tech stack
      HTML templates
      CSS Grid
      Docker server
    Use cases
      Analytics dashboard
      Custom chart wiring
      Demo data preview
    Audience
      Frontend devs
      Data analysts
      Keen IO users

mindmap root((dashboards)) What it does Layout templates CSS Grid resize Chart placeholders Tech stack HTML templates CSS Grid Docker server Use cases Analytics dashboard Custom chart wiring Demo data preview Audience Frontend devs Data analysts Keen IO users

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Pick a layout template, drop in your own chart code, and have a responsive analytics dashboard running in minutes

USE CASE 2

Use the included demo data files to preview a working dashboard before connecting a real data source

USE CASE 3

Run the dashboard as a local web server using the provided Docker setup

Tech stack

HTMLCSS GridJavaScriptDocker

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

This repository is a collection of HTML dashboard templates built by Keen IO for displaying analytics charts and data. The templates are based on CSS Grid, which means they resize and reflow automatically across different screen sizes. The goal is to give you a starting point for an analytics dashboard without writing layout code from scratch. The workflow is straightforward. You download the repository, choose a layout template from the collection, open the HTML file in a text editor, and fill in the chart-stage elements with your actual charts. Each layout positions placeholder containers on the page. You replace those placeholders with chart code, and the dashboard takes shape. The templates are designed to work especially well with Keen IO's own charting library, keen-dataviz.js, but the README notes they can work with any charting tool or data source. For Keen IO users, the setup involves pointing each chart at a Keen project and query. For those who do not have a Keen IO account, the repository includes demo data files that you can paste into the HTML to see a working example right away. The process of wiring up a chart involves matching the id attribute on a div element to a container selector in your chart code. Docker support is also included: you can clone the repository, build a Docker image, and run the dashboard as a local web server. Contributing is welcomed: the project accepts pull requests and bug reports via GitHub issues. The site backing this project publishes directly from the gh-pages branch, so approved changes go live immediately. The README does not specify a software license for the templates.

Copy-paste prompts

Prompt 1

Show me how to replace the chart-stage placeholder containers in keen-dashboards with Chart.js charts using my own data

Prompt 2

How do I use a keen-dashboards layout template with a charting library other than keen-dataviz.js?

Prompt 3

Walk me through running the keen-dashboards Docker setup locally and opening the dashboard in a browser

Prompt 4

Which keen-dashboards layout is best for displaying a mix of KPI summary numbers and a time-series line chart?

Prompt 5

How do I wire up a div in a keen-dashboards template to display a specific chart using its id attribute?

Open on GitHub → Explain another repo

← keen on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.