DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. Data Visualizations With InfluxDB and Plotly.js

Data Visualizations With InfluxDB and Plotly.js

Walk through creating data visualizations with InfluxDB and plotly.js, a JavaScript graphing library built on top of d3.js and stack.gl.

Margo Schaedel user avatar by
Margo Schaedel
·
Dec. 20, 17 · Tutorial
Like (3)
Save
Tweet
Share
12.84K Views

Join the DZone community and get the full member experience.

Join For Free

One of the great features of the InfluxData Time Series Platform is that users have the option to use the different stack components- Telegraf, InfluxDB, Kapacitor, and Chronograf-all together, or customize their usage by integrating InfluxDB with other libraries and technologies. Therefore, although Chronograf supplies a plethora of quick and easy visualizations and dashboards, users can also build and share their own custom visualizations. Here, we'll walk through creating data visualizations with InfluxDB and plotly.js, a JavaScript graphing library built on top of d3.js and stack.gl.

Getting Started

Before we start visualizing, we need to set up an instance of InfluxDB on our local machines. If you don't have the TICK Stack set up and running yet, it's best to go through the most recent Getting Started guide on the InfluxData website, which will walk you through installing and running all four packages of the stack. Or if you would prefer, you can experiment in sandbox mode.

Querying Data From InfluxDB

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 Node-influx client library. For this example, I'll be querying for data that Telegraf is already collecting for my computer. If you have the full TICK Stack installed and running, you should be able to do the same.

In my server.js file, I have the following:

const Influx = require('influx');
const express = require('express');
const path = require('path');
const os = require('os');
const bodyParser = require('body-parser');
const app = express();
const influx = new Influx.InfluxDB('http://127.0.0.1:8086/telegraf');

Also, in your shell, don't forget to run:

npm install influx express body-parser --save 

This will install the appropriate dependencies and require them into the server file so you can set up your server. You'll see I am connecting to my local instance of InfluxDB; specifically, the Telegraf database that is already collecting statistics about my computer. Let's add the following:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static(path.join(__dirname, 'public')));
app.set('port', 3000);

influx.getMeasurements()
  .then(names => console.log('My measurement names are: ' + names.join(', ')))
  .then(() => {
    app.listen(app.get('port'), () => {
      console.log(`Listening on ${app.get('port')}.`);
    });
  })
  .catch(error => console.log({ error }));

app.get('/api/v1/usage', (request, response) => {
  influx.query(`
    select mean("usage_user") as "mean_usage_user",
    mean("usage_system") as "mean_usage_system" from cpu
    where time > now() - 1h and
    host = ${Influx.escape.stringLit(os.hostname())}
    group by time(10s)
    order by time desc
    limit 200
    `)
    .then(result => response.status(200).json(result))
    .catch(error => response.status(500).json({ error }));
});

Here, I'm adding appropriate middleware to parse our responses (body-parser), setting the port to 3000, and defining the path which will serve up my index.html file. I use getMeasurements() to check what measurements are tracked in the database and set up the server to listen on port 3000. The last section of code queries the database for data, specifically, the mean CPU usage of user and system.

Setting Up HTML and CSS

Let's create a public directory and index.html, styles.css, and scripts.js files within that directory. We will be using these files to display the plotly graphs. Go ahead and add the following to your index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Visualizing Data from InfluxDB with Plotly</title>
  </head>
  <body>
    <header>
      <h1 class="title">Visualizing Data from InfluxDB with Plotly.js, a JavaScript Graphing Library</h1>
    </header>
    <main>
      <h2 class="graphs-title">My Time Series Graphs</h2>
      <div id="graphs-container">
        <!-- Append graph here -->
      </div>
    </main>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

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:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  color: #666;
  font-family: sans-serif;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 20vh;
  background: #666;
  color: #f8f8f8;
}

.title {
  font-size: 60px;
}

main {
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.graphs-title {
  margin: 30px auto;
}

#graphs-container {
  height: 60%;
  width: 80%;
}

Moving to our scripts.js file, this is where we can add functionality to visualize our data. Add the following:

const loadData = () => {
  fetch('/api/v1/usage')
    .then( response => {
      if (response.status !== 200) {
        console.log(response);
      }
      return response;
    })
    .then(response => response.json())
    .then(parsedResponse => {
      const unpackData = (arr, key) => {
        return arr.map(obj => obj[key])
      }
      const firstTrace = {
        type: 'scatter',
        mode: 'lines',
        name: 'Mean User Usage',
        x: unpackData(parsedResponse, 'time'),
        y: unpackData(parsedResponse, 'mean_usage_user'),
        line: {color: '#17BECF'}
      }
      const secondTrace = {
        type: "scatter",
        mode: "lines",
        name: 'Mean System Usage',
        x: unpackData(parsedResponse, 'time'),
        y: unpackData(parsedResponse, 'mean_usage_system'),
        line: {color: '#7F7F7F'}
      }
      const data = [firstTrace, secondTrace];
      const layout = {
        title: 'Local CPU Usage',
      };
      return Plotly.newPlot('graphs-container', data, layout);
    })
    .catch( error => console.log(error) );
}

$(window).on('load', loadData);

If you restart your server at this point and navigate to localhost:3000, you should see something similar to this:

And voila! You've got yourself a custom time series visualization using InfluxDB and plotly.js! You can check out the source code on GitHub here.

InfluxDB Data (computing) Visualization (graphics)

Published at DZone with permission of Margo Schaedel, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Spring Boot Docker Best Practices
  • Promises, Thenables, and Lazy-Evaluation: What, Why, How
  • Core Machine Learning Metrics
  • Public Cloud-to-Cloud Repatriation Trend

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: