Margo Schaedel作者丁楠雅校对张一豪翻译

手把手教你使用Dygraphs可视化时间序列数据(附代码、链接)

本文将介绍如何使用JavaScript的图形库Dygraphs来动态地可视化存储在InfluxDB(时间序列数据库)中不断更新的时间序列数据。

概述

本文将介绍如何使用JavaScript图形库:Dygraphs来动态地可视化更新存储在InfluxDB(时间序列数据库)中不断更新的时间序列数据。如果你偏爱某个可视化库,你可以查看plotly.js,Rickshaw,Highcharts这些库的帖子,或者你也可以在我们专为InfluxDB设计的Chronograf中构建一个仪表板。

准备和开始

首先,我们需要把一些示例数据显示在屏幕上。比如这个例子,我将使用由DevRel Anais Dotis-Georgiou独立编写的教程中的数据,使用Telegraf 编写的exec或尾部插件来收集比特币价格和体积数据,并查看它随时间变化的趋势。然后,我将使用前端的HTTP API定期查询InfluxDB中的数据。让我们开始吧!

根据你是否要将Dygraphs作为脚本文件导入index.html或导入npm模块,你可以在这里找到所有的相关说明。在下面这个例子中,我在index.html文件里添加了几个脚本标签,便于参考。

<!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堆栈找到所有组件,或者以沙盒方式启动堆栈),并且确保Telegraf正在Influx shell中通过运行 SELECT "price" FROM "exec"."autogen"."price" WHERE time > now() - 12h指令来收集比特币统计数据(你可以使用命令‘Influx’访问Influx shell)。对于时间序列数据,你总是希望控制查询范围,因此我们通过专门筛选价格和时间(12小时)来限制我们的结果,而不是直接运行SELECT * from exec。

运行此查询时,你至少会得到一个结果,具体取决于你的Telegraf实例的运行时间以及通过教程所述的一个插件收集统计信息的时长。或者,你可以导航到本地的Chronograf实例,并通过Data Explorer页面的自动查询构建器来验证你是否成功收集了数据。

从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 constructor 函数来构建图,如下所示:


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。

原文标题:

Visualizing Time Series Data With Dygraphs

原文链接:

https://dzone.com/articles/visualizing-time-series-data-with-dygraphs

THU数据派"基于清华,放眼世界",以扎实的理工功底闯荡“数据江湖”。发布全球大数据资讯,定期组织线下活动,分享前沿产业动态。了解清华大数据,敬请关注姐妹号“数据派THU”。

入门JavaScriptDygraphs时间序列分类
1
相关数据
比特币技术
Bitcoin

比特币是一种用去中心化、全球通用、不需第三方机构或个人,基于区块链作为支付技术的电子加密货币。比特币由中本聪于2009年1月3日,基于无国界的对等网络,用共识主动性开源软件发明创立。比特币也是目前知名度与市场总值最高的加密货币。 任何人皆可参与比特币活动,可以通过称为挖矿的电脑运算来发行。

参数技术
parameter

在数学和统计学裡,参数(英语:parameter)是使用通用变量来建立函数和变量之间关系(当这种关系很难用方程来阐述时)的一个数量。

查询技术
Query

一般来说,查询是询问的一种形式。它在不同的学科里涵义有所不同。在信息检索领域,查询指的是数据库和信息系统对信息检索的精确要求

数据库技术
Database

数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增、截取、更新、删除等操作。 所谓“数据库”系以一定方式储存在一起、能予多个用户共享、具有尽可能小的冗余度、与应用程序彼此独立的数据集合。

推荐文章