Building an analytics dashboard? Don’t start from scratch. 

There are two ways you can create a dashboard using Keen IO. In the first set of instructions we'll create one entirely via point-and-click. In the second portion, we'll show you how a dashboard can be customized so that it can be embedded in your own website. 

Create a Dashboard using Keen's data tools

The following steps teach you how to add your analysis to a dashboard entirely via Keen's UI tools without any coding required. 

Step 1: Log in to your Keen IO account, select your Project. Then click on the "Explorer" tab.

Step 2: Create a query.

Example Query: Enter count as the “Analysis Type”, select an Event Collection from the drop down, and press “Run Query” for a basic query.

You ran a query! Great Job! 

Step 3: Let's save your query. Press the button to "Save".

Step 3: Add your graph to a dashboard. Click on the "Dashboards" Tab on the menu bar and click “Create a dashboard now”. 

Name your dashboard ("Dashboard Name"), and use the "Select a Saved Query" drop down to add the query we saved to the first tile. Then click “Save”. 

Note: you can name your Row to give your Dashboard sub-headers and sub sections names. Just fill out the "Row Title" field before clicking "Save". 

Congratulations! You’ve created your first dashboard!

Create a Dashboard to Embed Analytics into your Product

Note: To fully take advantage, some coding and development may be needed. 

Here's a high-level overview overview of the steps to be completed: 

Step 1: Grab one of these responsive dashboard templates built on bootstrap: http://keen.github.io/dashboards/

Step 2: Check out the various layouts and pick the one that best suits your needs.

Step 3: Start editing! In the destination folder will exist an .html file. Open it in your favorite text editor. There are three things you need to do to edit your dashboard:

  1. Setup: Navigate to your Keen project. There are two fields you need to fill in from your project page. The PROJECT_ID which is listed below your project name, and then click the "Show API Keys" button to display your READ_KEY. Edit these variables in your .html file. 
  2. Run your Query. Create and run a query in the Explorer, or select the Saved Query that we created here before. When it's finished running, click the “</> Embed” button. This shows you the JavaScript for this query! Cool right?
    Simply copy the code between the <script type="text/javascript"> tags in the code generated for you. 
  3. Copy and Paste: Follow these instructions listed on where to paste the embed code, 
  4. You've set up your first chart! Repeat steps 2 and 3 for each of the charts you'd like to add to the template to complete your dashboard!

For more details and tips, check out our guides on: 

Did this answer your question?