Posted by on | Featured

概述

此帖子将遍历如何可视化动态更新存储在InfluxDB (时间序列数据库) 中的时间序列数据, 并使用 JavaScript 图形库: Dygraphs。如果您偏爱特定的可视化库, 请使用各种库 (plotly) 查看这些其他图形集成帖子. js,人力车, Highcharts, 或者你总是可以建立一个仪表板在我们自己的Chronograf, 专为 InfluxDB 设计。

准备和设置

首先, 我们需要在屏幕上显示一些示例数据。在本例中, 我将使用由 DevRel 安妮 Dotis 耶奥尔耶欧编写的独立教程中生成的数据, 使用 Telegraf exec或尾部插件收集比特币价格和卷数据, 并查看其趋势时间。然后, 我将使用前端的 HTTP API 定期查询 InfluxDB 中的数据。我们开始吧!

根据您是否要将 Dygraphs 作为脚本文件插入到索引中. html 文件或导入 npm 模块, 您可以在这里找到所有相关的说明。在本例中, 我在索引中添加了几个脚本标记以便于引用, 在这种情况下:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dygraphs Sample</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="div_g"></div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</html>

查询 InfluxDB

确保 InfluxDB 的本地实例正在运行 (您可以获取本地设置的刻度栈的所有组件, 或者以沙盒方式旋转堆栈), 并且 Telegraf 正在收集比特币统计信息, SELECT "price" FROM "exec"."autogen"."price" WHERE time > now() - 12h 在您的涌入 shell 中运行 (您可以使用命令访问流入 shell influx )。使用时间序列数据, 您总是希望范围您的查询, 因此, 而不是运行 a SELECT * from exec , 我们在这里限制我们的结果, 通过选择特定的价格和限制时间 (12 小时)

或者, 您可以导航到本地Chronograf实例, 并通过 “数据资源管理器” 页验证是否成功收集数据, 该页面具有自动查询生成器。

从 InfluxDB 获取数据

在脚本文件中, 您需要使用 HTTP API 从 InfluxDB 中获取数据, 如下所:

const fetchData = () => {
  return fetch(`http://localhost:8086/query?db=exec&q=SELECT%20"price"%20FROM%20"price"`)
    .then( response => {
      if (response.status !== 200) {
        console.log(response);
      }
      return response;
    })
    .then( response => response.json() )
    .then( parsedResponse => {
      const data = [];
      parsedResponse.results[0].series[0].values.map( (elem, i) => {
        let newArr = [];
        newArr.push(new Date(Date.parse(elem[0])));
        newArr.push(elem[1]);
        data.push(newArr);
      });
      return data;
    })
    .catch( error => console.log(error) );
}

构造图

我们可以使用 Dygraphs 构造函数构造图, 如下所示:

const drawGraph = () => {
  let g;
  Promise.resolve(fetchData())
    .then( data => {
      g = new Dygraph(
        document.getElementById("div_g"),
        data,
        {
          drawPoints: true,
          title: 'Bitcoin Pricing',
          titleHeight: 32,
          ylabel: 'Price (USD)',
          xlabel: 'Date',
          strokeWidth: 1.5,
          labels: ['Date', 'Price'],
        });
    });

  window.setInterval( () => {
    console.log(Date.now());
    Promise.resolve(fetchData())
      .then( data => {
        g.updateOptions( { 'file': data } );
      });
  }, 300000);
}

函数中所发生的事情是, 在 drawGraph 从 InfluxDB 获取数据后, 我们创建一个新的 Dygraph, 方法是以呈现图形的元素为对象, 添加数据数组, 然后将“选项” 对象添加为第三个参数. 为了动态更新图形随着时间的推移, 我们添加一个setInterval的方法来获取新的数据每五分钟 (不幸的是, 任何调用往往需要付费订阅的 Alpha 优势 API 的比特币定价), 并使用 updateOptions 方法来引入新的数据。

总结

如果你能做到这一点, 我会为你鼓掌。请随时查看源代码, 进行一些并排比较。此外, 如果您想尝试多种样式, Dygraphs 还有一个可用的演示库。我们想听到你的作品!在 Twitter 上找我们: @mschae16还是@influxDB。

Tags: ,
Comments are closed.