How to Make an Amazing Looking Iot Dashboard in No Time
Tags: iot, dashboard
Published: 2019-06-04 14:40:24


In this post, I’m going to show you how to get started with Grafana and InfluxDB running in a docker container on Digital Ocean. That way you can get on demand pretty graphs like these:

![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-05%20at%2012.55.10%20PM.png)

The cost?

**$5 a month**

Let’s get to it.

## Steps
1. Login to Digital Ocean. If you don’t have Digital Ocean and would like to support this blog click [here](https://m.do.co/c/9574d3846a29) to create an account.
2. Go to `Account Settings` -> `Security` and make sure you have an SSH key setup.
![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-07%20at%209.14.07%20AM.png)
3. Create a new droplet use their [docker image](https://marketplace.digitalocean.com/apps/docker)
4. Make sure you select the $5 a month plan. For simple installs, this is more than enough!
5. SSH in once you’re done: `ssh root@<yourserverip>`
6. Set up InfluxDB

    `docker run --rm -e INFLUXDB_HTTP_AUTH_ENABLED=true -e INFLUXDB_DB=particle -e INFLUXDB_ADMIN_ENABLED=true -e INFLUXDB_ADMIN_USER=admin -e INFLUXDB_USER=grafana -v influxdb:/var/lib/influxdb influxdb /init-influxdb.sh`

    Watch the output of this command. It will generate passwords for both your `admin` and `grafana` user. Save these in a safe place!

7. Start influx
      
    `docker run -d -p 8086:8086 \
        -v influxdb:/var/lib/influxdb \
        -e INFLUXDB_HTTP_AUTH_ENABLED=true \
        influxdb`

8. Add firewall rule


    `ufw allow 8086`

    This allows the outside world to get to your InfluxDB instance.

9. Set up curl from Particle

      Example equivalent call:
      `curl -i -XPOST 'http://<DOCKER IP HERE>:8086/write?db=particle' --data-binary 'temperature,id=<ID HERE> value=22.1'`


      The version of this to put in the **custom request** would be:

      `temperature,id={{{PARTICLE_DEVICE_ID}}} value={{{temperature}}}`

      ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-04%20at%209.19.59%20PM.png)

      **Note:**  see under `QUERY PARAMETERS` that `db` is pointing to `particle`. This should point to whatever you  set `INFLUXDB_DB` to in step 6

      **Second Note:** make sure that the username and password is the one you set up on step 6 as well. In this example the username is `grafana`

      ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-04%20at%209.19.54%20PM.png)

      Here’s a more complex version:

      `temperature,id={{{PARTICLE_DEVICE_ID}}} value={{{temperature}}}
      humidity,id={{{PARTICLE_DEVICE_ID}}} value={{{humidity}}}
      tvoc,id={{{PARTICLE_DEVICE_ID}}} value={{{tvoc}}}
      c02,id={{{PARTICLE_DEVICE_ID}}} value={{{c02}}}
      {{#pm25}}pm25,id={{{PARTICLE_DEVICE_ID}}} value={{{pm25}}}{{/pm25}}
      {{#pm10}}pm10,id={{{PARTICLE_DEVICE_ID}}} value={{{pm10}}}{{/pm10}}
      {{#sgp30_tvoc}}sgp30_tvoc,id={{{PARTICLE_DEVICE_ID}}} value={{{sgp30_tvoc}}}{{/sgp30_tvoc}}
      {{#sgp30_c02}}sgp30_c02,id={{{PARTICLE_DEVICE_ID}}} value={{{sgp30_c02}}}{{/sgp30_c02}}
      {{#bme680_pres}}bme680_pres,id={{{PARTICLE_DEVICE_ID}}} value={{{bme680_pres}}}{{/bme680_pres}}
      {{#bme680_iaq}}bme680_iaq,id={{{PARTICLE_DEVICE_ID}}} value={{{bme680_iaq}}}{{/bme680_iaq}}
      {{#bme680_temp_calc}}bme680_temp_calc,id={{{PARTICLE_DEVICE_ID}}} value={{{bme680_temp_calc}}}{{/bme680_temp_calc}}
      {{#bme680_hum_calc}}bme680_hum_calc,id={{{PARTICLE_DEVICE_ID}}} value={{{bme680_hum_calc}}}{{/bme680_hum_calc}}`

      For conditional data you can wrap the whole line in the variable that may or may not be there:

      `{{#bme680_pres}}<insert stuff related to bme680_pres>{{/bme680_pres}}`

10. Next! Install Grafana with persistent storage and start it

    `docker volume create grafana-storage`

    `docker run \
      -d \
      -p 3000:3000 \
      --name=grafana \
      -v grafana-storage:/var/lib/grafana \
      grafana/grafana`

11. Add firewall rule for graphana

    `ufw allow 3000`

12. Login. This should be your Digital Ocean Droplet ip + :3000 appended. Example: `123.456.789.101:3000` (Default username and password is **admin** and **admin**)

13. Connect Grafana to Influx (should be one of the first options on a fresh Grafana install)

    ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-04%20at%209.24.02%20PM%20copy.png)

    ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-04%20at%209.25.39%20PM%20copy.png)

    **Note** under user, you’ll have to put the username `grafana` and the generated password from step 6. Also the name of the database has been set as `particle` in the same step.

14. Test your connection by clicking `Save & Test` It should come back quickly saying whether or not a connection has been successful.
15. Start up your device, if not already, and get it publishing to your InfluxDB database.

    (Need data? [This project should get you some!](https://www.jaredwolff.com/homemade-indoor-air-quality-sensor/))

16. Create graphs!

    Finally, the reason why you came to this page: **pretty graphs**

    Click the **+** icon on the left and create a **new dashboard**

    ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-07%20at%209.32.49%20AM.png)

17. Select `Add Query`

    ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-07%20at%209.33.58%20AM.png)

18. Go down and click `select measurement` If your device has been publishing to your database, you should see some options for values.

    ![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-07%20at%209.34.32%20AM.png)

19. Under `fill(null)` change that to `fill(none)`. That should give you a nice line between datapoints.
20. You should see the graph appear!
![](https://www.jaredwolff.com/how-to-make-an-amazing-looking-iot-dashboard-in-no-time/images/Screen%20Shot%202019-05-07%20at%209.36.36%20AM.png)
19. Click the back arrow button and then click the save button.
20. You now created a simple graph on the data directly from your device! I recommend you play around with the Grafana interface. It's fairly intuitive and takes only a few short minutes to get used to!

## HTTPS/SSL

Installing HTTPS/SSL is fairly straight forward. Follow the steps below:

1. Stop the Grafana instance if you haven't already
2. Start a new container with `nginx-proxy`

    `docker run --detach \
       --name nginx-proxy \
       --publish 80:80 \
       --publish 443:443 \
       --volume /etc/nginx/certs \
       --volume /etc/nginx/vhost.d \
       —volume /usr/share/nginx/html \
       —volume /var/run/docker.sock:/tmp/docker.sock:ro \
       jwilder/nginx-proxy`

3. Run the `letsencrypt-nginx-proxy-companion`

    `docker run —detach \
       —name nginx-proxy-letsencrypt \
       —volumes-from nginx-proxy \
       —volume /var/run/docker.sock:/var/run/docker.sock:ro \
       jrcs/letsencrypt-nginx-proxy-companion`

4. Restart the Grafana container

    `docker run \
     -d \
   	 --env "VIRTUAL_HOST=<YOUR SUBDOMAIN ADDRESS>" \
     --env "VIRTUAL_PORT=3000" \
     --env "LETSENCRYPT_HOST=<YOUR SUBDOMAIN ADDRESS>" \
     --env "LETSENCRYPT_EMAIL=<YOUR EMAIL ADDRESS>" \
     --name=grafana \
     -v grafana-storage:/var/lib/grafana \
     grafana/grafana`

   **Note:** make sure you replace `<YOUR SUBDOMAIN ADDRESS>` and `<YOUR EMAIL ADDRESS>` above with your own info.

The proxy companion will generate an SSL certificate for the virtual host that you provided to the Grafana container. The proxy is used to forward all HTTP/HTTPS traffic to your Grafana container. It's clean, it's simple and it's secure!

**Note** InfluxDB is a bit more difficult. You either need to make a separate subdomain or configure HTTPS to share the certs between Grafana and Influx. This [Docker Compose script](https://www.grzegorowski.com/grafana-with-lets-encrypt-ssl-on-docker/) does it all if you haven't already installed everything. You can follow the same steps above if you want to run it on a separate sub-domain.

## Handy Links
Here are some handy links that I found useful getting started with Grafana + InfluxDB

* [influxdb | Docker Documentation](https://docs.docker.com/samples/library/influxdb/)
* [Getting Started | Grafana Documentation](https://grafana.com/docs/guides/getting_started/)
* [Installing using Docker | Grafana Documentation](https://grafana.com/docs/installation/docker/)
* [Let's Encrypt Nginx Proxy Companion](https://hub.docker.com/r/jrcs/letsencrypt-nginx-proxy-companion/)
* [Very Handy about Setting up HTTPS for both Grafana and Influx](https://www.grzegorowski.com/grafana-with-lets-encrypt-ssl-on-docker/)

## Conclusion

You made it. Enjoy your new Grafana + InfluxDB install!

If you liked this tutorial, please share with your friends and your enemies. Also if you’re craving more, [check out how to build your own air quality sensor using only a few parts.](https://www.jaredwolff.com/homemade-indoor-air-quality-sensor/)