使用Dygraphs可视化时序数据

作者：Margo Schaedel / 产品，用例，开发者
2018年10月03日

导航到

graph on ipad

概述

本文将介绍如何使用JavaScript绘图库：Dygraphs（Dygraphs），来可视化存储在InfluxDB（一个时序数据库）中的动态更新时序数据。如果您对特定的可视化库有偏好，可以查看使用各种库的其他图形集成文章——例如plotly.js，Rickshaw，Highcharts，或者您也可以在我们的专门为InfluxDB设计的Chronograf中构建仪表板。

准备和设置

首先，我们需要一些样本数据来显示在屏幕上。在这个例子中，我将使用DevRel Anais Dotis-Georgiou编写的一个关于使用Telegraf exec 或 tail 插件来收集比特币价格和体积数据并查看其趋势的教程中生成的数据。然后，我将使用前端上的HTTP API定期查询InfluxDB中的数据。让我们开始吧！

根据您是想将Dygraphs作为脚本文件拉入index.html文件中，还是导入npm模块，您可以在这里找到所有相关的说明。为了方便参考，我在index.html文件中添加了几个script标签

<!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正在运行（您可以在本地设置TICK Stack的所有组件，或者通过TICK Stack的沙盒方式启动堆栈），并且Telegraf正在通过在Influx shell中运行以下查询来收集比特币统计数据：SELECT "price" FROM "exec"."autogen"."price" WHERE time > now() - 12h（您可以通过命令influx访问Influx shell）。在时间序列数据中，您始终希望限定查询范围，所以我们不是运行SELECT * from exec，而是在这里通过选择价格并限制时间（12小时）来限制结果。

当运行此查询时，您应该至少收到一个结果，具体取决于您的Telegraf实例运行和收集统计数据的时长，以及通过教程中某个插件的方式。或者，您可以导航到您的本地Chronograf实例，并验证您是否已通过数据探索器页面成功收集数据，该页面具有自动查询构建器。

从InfluxDB获取数据

在您的脚本文件中，您可能希望使用HTTP API从InfluxDB获取数据，如下所示

const fetchData = () => {
  return fetch(`https://127.0.0.1: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 Vantage API付费订阅），并使用updateOptions方法引入新数据。

总结

如果您已经做到了这一点，我为您鼓掌。您可以随意查看源代码进行侧面比较。此外，Dygraphs有一个演示画廊，如果您想尝试各种样式，可以查看。我们想了解您的所有创作！在Twitter上找我们：@mschae16或@influxDB。