手把手教你使用Dygraphs可视化时间序列数据(附代码、链接)
作者:Margo Schaedel
翻译:张一豪
校对:丁楠雅本文约1200字,建议阅读5分钟。
本文将介绍如何使用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数据派产学研的背景为志愿者带来好的发展机遇。其他福利:来自于名企的数据科学工作者,北大清华以及海外等名校学生他们都将成为你在翻译小组的伙伴。
点击文末“阅读原文”加入数据派团队~转载须知如需转载,请在开篇显著位置注明作者和出处(转自:数据派ID:datapi),并在文章结尾放置数据派醒目二维码。有原创标识文章,请发送【文章名称-待授权公众号名称及ID】至联系邮箱,申请白名单授权并按要求编辑。发布后请将链接反馈至联系邮箱(见下方)。未经许可的转载以及改编者,我们将依法追究其法律责任。
点击“阅读原文”拥抱组织
- 使用R进行数据可视化套路之-散点图、图形分隔、时间序列
- 8.4.2 时间序列预测——使用TFLearn自定义模型——代码运行错误及解决方法
- geotrellis使用(二十三)动态加载时间序列数据
- 使用Grafana展示时间序列数据
- Python中如何使用以及去除时间序列数据中的趋势信息
- 5 种使用 Python 代码轻松实现数据可视化的方法
- 使用matplotlib绘制不连续时间序列的OHLC数据
- 使用链接时间代码生成
- 推荐 :手把手教你用Python处理非平稳时间序列(附代码)
- ElasticSearch 使用不同表结构存储时间序列数据的查询效率分析
- 时间序列数据库KDB 与Java结合使用介绍 -- 1 KDB Java代码解读
- PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳。在高并发或者间隔时长极短(如循环代码)的情况下,会出现大量重复数据。即使使用了第二个参数,也会重复,最好的方案是结
- CNTK API文档翻译(10)——使用LSTM预测时间序列数据
- CNTK API文档翻译(11)——使用LSTM预测时间序列数据(物联网数据)
- 人工智能:python 实现 第十一章,使用Pandas处理时间序列数据
- 数据城堡参赛代码实战篇(一)---手把手教你使用pandas
- MetricGraphics.js – 时间序列数据的可视化
- Facebook开源时间序列内存数据库Beringei,追求极致压缩率——如果是int根据大多数时间序列中的值与相邻数据点相比并没有显著的变化,只要使用XOR将当前值与先前值进行比较,然后存储发生变化的比特。最终,该算法将整个数据集至少压缩了90%
- 获取CPU时间戳代码 使用CPU时间戳进行高精度计时
- GridView里使用 DropDownList 更新数据列,不需要写一句代码