How to Make an Amazing Looking Iot Dashboard in No Time using Grafana + InfluxDB and Digital Ocean

Jared Wolff · 2019.5.8· 5 Minute Read · iot · resources

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:

What it could look like.

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 to create an account.
  2. Go to Account Settings -> Security and make sure you have an SSH key setup. SSH key setup
  3. Create a new droplet use their docker image
  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!

    Note: you should be specifically looking for lines that look like this:

      INFLUXDB_USER_PASSWORD:LYLAysrR_YG1s6oEDJTzLntpVZijyM8p
      [httpd] 127.0.0.1 - admin [22/Aug/2019:01:41:53 +0000] "GET /ping HTTP/1.1" 204 0 "-" "InfluxDBShell/1.7.7" 0498fb71-c47e-11e9-8005-0242ac110002 69
      ts=2019-08-22T01:41:53.358064Z lvl=info msg="Executing query" log_id=0HPkdL90000 service=query query="CREATE USER grafana WITH PASSWORD [REDACTED]"

    and

      Unable to find image 'influxdb:latest' locally
      latest: Pulling from library/influxdb
      9cc2ad81d40d: Pull complete
      e6cb98e32a52: Pull complete
      ae1b8d879bad: Pull complete
      04e291e7182c: Pull complete
      8a1d428a64d3: Pull complete
      46b36f496f9c: Pull complete
      4fd89c5201ab: Pull complete
      b0f09a31bec5: Pull complete
      Digest: sha256:cfaedba9f2029b8e031c1ebaba1f7b258cba854d3b2cacab75e9e616102c97bb
      Status: Downloaded newer image for influxdb:latest
      INFLUXDB_ADMIN_PASSWORD:sTqjtckmyEFJQeOX7Vv97fshCBM1ow_W

    Specifically, keep your eyes peeled for INFLUXDB_USER_PASSWORD and INFLUXDB_ADMIN_PASSWORD.

  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 Particle Integration / Webhook

    Setup your URL to match the external URL of your InfluxDB instance. Also make sure that you’re using a POST command.

    Beggining of setting up integration

    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}}}

    Setting up integration further

    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

    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

      # create a persistent volume for your data in /var/lib/grafana (database and plugins)
      docker volume create grafana-storage
    
      # start grafana
      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)

    Grafana database install

    Configuring.

    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!)

  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

    Creating new dashboard

  17. Select Add Query

    New panel

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

    New query

  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!

  21. Click the back arrow button and then click the save button.

  22. 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 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.

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

Conclusion

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

Looking for more?

Here’s the video overview of Grafana:

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.

The Ultimate Guide to Particle Mesh Cover

Get Ready for the Ultimate Guide

Signup to get updates on The Ultimate Guide to Particle Mesh. Early subscribers get a discount when it becomes available!

Sign me up!

You may also like