Одной из замечательных особенностей платформы временных рядов InfluxData является то, что у пользователей есть возможность использовать различные компоненты стека — Telegraf, InfluxDB, Kapacitor и Chronograf — все вместе или настроить их использование путем интеграции InfluxDB с другими библиотеками и технологиями. Таким образом, хотя Chronograf предоставляет множество быстрых и простых визуализаций и информационных панелей, пользователи также могут создавать и публиковать свои собственные визуализации. Здесь мы рассмотрим создание визуализации данных с помощью InfluxDB и plotly.js, графической библиотеки JavaScript, построенной на основе d3.js и stack.gl.

Начиная

Прежде чем мы начнем визуализацию, нам нужно настроить экземпляр InfluxDB на наших локальных машинах. Если у вас еще не настроен и не запущен TICK Stack, лучше всего ознакомиться с самым последним руководством Начало работы на веб-сайте InfluxData, которое поможет вам установить и запустить все четыре пакета куча . Или, если хотите, можете поэкспериментировать в режиме песочницы.

Запрос данных из InfluxDB

После того, как вы все настроили и InfluxDB запущена, вы можете настроить файл для запроса базы данных и получения некоторых данных. Я собираюсь сделать это с Node/Express, используя клиентскую библиотеку Node-influx. В этом примере я буду запрашивать данные, которые Telegraf уже собирает для моего компьютера. Если у вас установлен и работает полный стек TICK, вы сможете сделать то же самое.

В моем файле server.js у меня есть следующее:

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');

Кроме того, в вашей оболочке не забудьте запустить:

npm install influx express body-parser --save

Это установит соответствующие зависимости и потребует их в файле сервера, чтобы вы могли настроить свой сервер. Вы увидите, что я подключаюсь к своему локальному экземпляру InfluxDB, в частности, к базе данных телеграфа, которая уже собирает статистику о моем компьютере. Добавим следующее:

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

Здесь я добавляю соответствующее промежуточное ПО для анализа наших ответов (парсер тела), устанавливаю порт на 3000 и определяю путь, который будет обслуживать мой файл index.html. Я использую «getMeasurements()», чтобы проверить, какие измерения отслеживаются в базе данных, и настроить сервер для прослушивания порта 3000. Последний раздел кода запрашивает данные в базе данных, в частности, среднее использование процессора пользователем и системой.

Настройка HTML и CSS

Давайте создадим общедоступный каталог и файлы index.html, styles.css и scripts.js в этом каталоге. Мы будем использовать эти файлы для отображения графиков. Идите вперед и добавьте следующее в ваш файл index.html:

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

Помимо включения jquery и вашего файла сценария, вам необходимо включить plotly CDN. Кроме того, вы можете установить библиотеку plotly.js как модуль npm. Для получения дополнительной информации об этом, пожалуйста, посетите Руководство по началу работы на веб-сайте plotly.js.

Давайте добавим следующий CSS-код в наш файл styles.css для разнообразия:

*,
*::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%;
}

Переходя к нашему файлу scripts.js, здесь мы можем добавить функциональность для визуализации наших данных. Добавьте следующее:

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

Если вы перезапустите свой сервер в этот момент и перейдете на localhost: 3000, вы должны увидеть что-то похожее на это:

И вуаля! У вас есть собственная визуализация данных временных рядов с использованием InfluxDB и plotly.js! Вы можете ознакомиться с исходным кодом на GitHub или написать мне в Twitter @mschae16!

Первоначально опубликовано на www.influxdata.com 11 декабря 2017 г.