Part 2. Initial State

In this example, we have a live Initial State dashboard that we want to embed in our custom webpage. (Initial State is a data streaming + data visualization service that lets you create dashboards, waveforms, triggers, etc. from historical and real-time data.)

If we simply wanted to share this dashboard as is, we could use its share URL:

https://go.init.st/0hw08py (learn more about sharing Initial State data here)

We want to embed this dashboard into a custom webpage with other elements like an image, which is the entire point of this tutorial. Initial State lets you generate an iframe embed for any of your dashboards. iframe elements can be easily inserted into custom HTML, which allows us to build whatever we want around them. The iframe embed code for this dashboard looks like this:

<iframe src="https://iot.app.initialstate.com/embed/#/tiles/bkt_ebon1jp1i2kqc"></iframe>

We already have a complete Node.js example in this repo to play with that uses this iframe embed. Let's play.

Clone the Node.js example repo

Run the following to clone the example Node.js project GitHub repo onto your Pi:

$ git clone https://github.com/initialstate/simple-dashboard-server.git

Install the example project:

$ cd simple-dashboard-server 
$ npm install 

We are ready to run our Node.js web server and view our hosted web page.

<< Part 1: Node.js - Part 3: Run It >>