Data Visualizations with InfluxDB: Integrating plotly.js
By Zoe Steinkamp / Jan 29, 2022 / InfluxData, InfluxDB, Community, Developer, InfluxDB, InfluxData, Time Series Database, Plotly Js, Visualizations, Graphs, Tutorial
Querying data from InfluxDB
When you start your project you will want to run these commands, this will initialize the node project, install the influx client and install express.
npm init -y influx-node-app npm i @influxdata/influxdb-client npm install express --save
Once you’re all set up, and InfluxDB is running, you can set up a file to query the database and grab some data. I’m going to do this with Node/Express using the influx-js client library. For this example, I’ll be querying for data that Telegraf is already collecting for my computer. If you have the Telegraf installed and running, you should be able to do the same. I would expect your package.json file to look like this, keeping in mind i have my main file as app.js:
In my app.js file, I have the following. As you can see you will need to add your org email and your secret token, it will need to be added to a token file that you don’t push up to GitHub publicly. Also pay attention to what your influx url is, mine is set to us-west:
Finally in the rest of my app.js file:
This is my app.get function to grab my cpu total usage. I am using a flux query with a few filter functions to get the exact data I’m looking to display. I am filtering down with my flux query because it is easier to filter the data coming in then do filter in our application. My flux query was built using the query builder in the InfluxDB Cloud. This made it easy to build my simple query and then by switching to script editor I could copy the flux script.
From there, the data is called into our script.js file.
Here I have two fetch functions that call for two specific data sources with two separate Flux queries. We unpack the data and specifically we are looking for the time and value to be our x and y lines when graphed. We return trace data which is our graph with an array of x and y variables. Finally once we have received all the data from influx and prepared our graph object we call for Plotly to be graphed.
It’s important if you add more fetch data calls that you add them to our promise so it waits to make the Plotly graphs until all the data has been returned. And finally we make our Plotly line graph with two lines.
Setting up HTML and CSS
In the public folder directory you will find the index.html, styles.css, and scripts.js file. We will be using these files to display the plotly graphs. In our index.html you will see where we append the graph from script.js:
Aside from incorporating jquery and your script file, you’ll need to incorporate the Plotly CDN. Alternatively, you can install the plotly.js library as an npm module. For more information on that, please visit the “Getting Started” guide on the plotly.js website.
Let’s add the following CSS to our styles.css file for a bit of flair:
If you restart your server at this point and navigate to localhost:3000, you should see something similar to this: