Skip to content
Get packs

Guide · Open source

How to use dashboards: templates, charts and setup

Updated · written with AI from the project's own documentation and checked against our catalogue data

keen/dashboards is a set of pre-built, responsive dashboard layouts made with CSS Grid, released under the MIT licence. It is aimed at developers who want a starting layout for an analytics dashboard instead of writing the CSS from scratch. By the end of this guide you will know how to pick a template, place chart containers in it, connect them to your data, and run the project with Docker.

Keen Dashboardskeen/dashboards · ★ 11k · MIT

Quick start

  1. 1Get the repository. Download the zip file from the README link or run git clone on the repository.
  2. 2Pick a layout. Open the layouts folder and choose the template that suits your dashboard.
  3. 3Set up your data. Use your Keen IO project or the demo data files in the demo-data folder.
  4. 4Paste the sample code. Copy the code from sample.html and paste it just before the closing body tag of your HTML file.
  5. 5Set chart container ids. Give each chart-stage node an id and set a height for it in your stylesheet or inline CSS.
  6. 6Run with Docker (optional). Build the image with docker build -t keen/dashboards . and start it with docker run -d -p 80:80 keen/dashboards.

What the keen/dashboards templates include

The project provides layout templates and example pages. The layouts are pre-built dashboard views, and the examples show specific domains, data models and popular integrations with charts.

The templates are built from a minimal set of custom styles and are designed to work well on different screen sizes. The README says they are designed to be pointed at Keen IO's charting libraries, though they can also be used with other data sources or charts.

  • Layouts: pre-built, responsive dashboard views
  • Examples: domain-specific pages for data models and popular integrations
  • Charts are placed in a chart-wrapper with a chart-title, a chart-stage and optional chart-notes

Get the templates onto your computer

You can download the repository as a zip file or clone it with Git. The README gives the zip link and the clone command. Once you have the files, find the template you want in the layouts folder.

The README gives the path pattern folder/layouts/(name-of-template) for the template you pick.

  • Download the zip file from the link in the README, or clone the repository
  • Open the layouts folder and pick the template that best suits your needs
git clone https://github.com/keen/dashboards.git

Structure a chart in the layout

Each chart sits inside a chart-wrapper. The chart-stage element is where the chart is rendered. Give the inner node an id so the chart library can find it.

The README says that when charts are produced with keen-dataviz.js, the HTML wrapper for each chart (.chart-wrapper) is rendered automatically. You must set a height on the node in your stylesheet or with inline CSS.

  • Set an id on the chart-stage node, for example chart-01
  • Remove the placeholder img tag that the template uses for sample images
  • Repeat for each chart in the dashboard
<div class="chart-stage" id="chart-01"> <!-- Get rid of that img tag! --> </div>

Connect the template to your data

The README describes three steps for editing a template. First, set up the data: if you are a registered Keen IO user, use your Keen project; otherwise you can use the demo data in the demo-data folder. Second, paste the sample code from sample.html just before the closing body tag of your HTML file. Third, hook each template item to the code you pasted by setting its id.

Each KeenDataviz instance has a container property, which is a node selector required by query. The query looks for a matching node in the HTML file.

  • Setup: use your Keen project or the demo data files in demo-data
  • Paste the code from sample.html just before the closing body tag
  • Match each chart container id to the item in the template

Run the project with Docker (optional)

If you prefer to serve the project in a container, the README gives three commands: clone the repository, build an image, and run it. The container maps port 80 on your machine to port 80 in the container.

The README lists Docker as a prerequisite only for this option. Development of the project itself needs Bower and npm instead.

  • Prerequisites for this option: Git and Docker
  • Port mapping in the README is 80:80
$ cd dashboards $ docker build -t keen/dashboards . $ docker run -d -p 80:80 keen/dashboards

Check whether the project fits your needs

The project was last pushed on 2021-11-02, so the code may be out of date with current libraries. Check the example dependencies before you build on them.

If you want a hosted analytics product rather than templates, this project is not that. It is a set of files you edit and host yourself.

  • Good fit: developers who need a responsive grid layout for an internal dashboard
  • Poor fit: non-developers who want a finished dashboard with no coding
  • Comparable projects include Tabler, AdminLTE, Bootstrap Admin Template and Grafana

What people use it for

  • An internal analytics dashboard for a development team
  • A customer-facing dashboard that needs to work on different screen sizes
  • A starting point for a domain-specific dashboard, using one of the example pages as a reference

Frequently asked questions

Is keen/dashboards free to use?

The project is released under the MIT licence, as stated in the project information. Check the licence file in the repository for the full terms before you use it in a product.

Do I need to know how to code to use it?

Yes. The README assumes you will edit HTML and wire up scripts. It is not a finished dashboard that requires no coding.

What do I need installed before I start?

For the basic template use, you need the files from the repository. The README lists Git and Docker as prerequisites for the Docker option, and Bower and npm only if you want to develop the project itself.

Can I use keen/dashboards without Keen IO?

The README says the templates can work with any data source or charting library, though they are streamlined for Keen IO's Dataviz SDK. You would need to wire your own data and charts into the template.

Why does my chart not appear?

The README says each container node needs a height set in your stylesheet or inline CSS, and the chart needs a matching id. Check both, and confirm the sample code is pasted before the closing body tag.

What are good alternatives to keen/dashboards?

The comparable projects listed are Tabler, AdminLTE, Bootstrap Admin Template and Grafana. Choose based on whether you want templates to edit or a full monitoring tool.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use keen/dashboards if you are a developer who wants a responsive CSS Grid starting point for an internal analytics dashboard and you are comfortable editing HTML. Pick something else if you need a finished no-code product, a hosted service, or actively maintained code, since the last push was in 2021.

Install options & downloads