干货丨前端chart组件展示DolphinDB数据教程
数据图表前端组件在物联网和实时监控的场景有广泛的应用,当前比较流行的有Echarts、HighCharts等组件。本文主要讲解如何通过DolphinDB的Web数据接口和JavaScript来展示 DolphinDB time-series database 的数据。
DolphinDB提供了基于HTTPS协议的接口,可以通过HTTP的post方式提交查询语句并返回JSON格式的结果。具体用法可以参考DolphinDB Web API。
DolphinDB的返回数据格式是列式的JSON字符串。例如,一个表返回JSON如下:
{
"sessionID": "3691974869",
"userId": "admin",
"resultCode": "0",
"msg": "",
"object": [{
"name": "",
"form": "table",
"size": "11",
"value": [{
"name": "second_time",
"form": "vector",
"type": "second",
"size": "11",
"value": ["13:03:50", "13:03:51", "13:03:52", "13:03:53", "13:03:54", "13:03:55", "13:03:56", "13:03:57", "13:03:58", "13:03:59", "13:04:00"]
}, {
"name": "ec",
"form": "vector",
"type": "double",
"size": "11",
"value": [1.019094, 0.971753, 0.962792, 1.014048, 0.991746, 1.016851, 0.98674, 1.00463, 0.991642, 1.018987, 1.008604]
}]
}]
}
Echarts前端组件所需的数据格式如下:
option = {
xAxis: {
data: ["13:03:50", "13:03:51", "13:03:52", "13:03:53", "13:03:54", "13:03:55", "13:03:56", "13:03:57", "13:03:58", "13:03:59", "13:04:00"]
},
yAxis: {
type: 'value'
},
series: [{
data: [1.019094, 0.971753, 0.962792, 1.014048, 0.991746, 1.016851, 0.98674, 1.00463, 0.991642, 1.018987, 1.008604],
type: 'line'
}]
};
从两者的结构来看,只需要将DolphinDB的返回结果稍作转换即可满足Echarts的数据格式规范。使用DolphinDB Web API开发包可以使转换更加简单。
下面通过例子介绍如何使用Echarts和HighCharts组件来展示DolphinDB中的数据。
- Echarts代码示例
假设以下场景:工厂有10台设备,每一毫秒采集温度值数据并写入DolphinDB分布式数据表中,并在网页中展示出每秒钟平均温度线状图。
在DolphinDB中通过脚本模拟生成10秒钟的数据。
data = table(100000:0,
devIdtime`ec,[INT,TIMESTAMP,DOUBLE]);
data.tableInsert(take(1..10,10000),add((1..10000),now()) , norm(1,0.5,10000))
share data as iotTable
通过JavaScript脚本从DolphinDB获取数据,并转换为Echarts所需的格式。这里使用了DolphinDB JavaScript的接口开发包(下载地址:https://github.com/dolphindb/api-json),并引入DolphinDBConnection.js和DolphinDBEntity.js两个js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.9.1.min.js"></script>
<script src="DBConnection.js"></script>
<script src="DolphinDBEntity.js"></script>
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var conn = new DolphinDBConnection('http://localhost:8848'); //向DolphinDB发送查询脚本,并获取返回的数据 conn.run("select avg(ec) as ec from iotTable group by second(time)", function(re){ if(re.resultCode&&re.resultCode=="1"){ alert(re.msg); } else { jobj = new DolphinDBEntity(re).toVector();//将返回结果转换成列数据 var time = jobj[0].value; var ecdata = jobj[1].value; var option = { title: { text: '设备温度' }, xAxis: { data: time }, yAxis: {}, series: [{ name: '温度', type: 'line', data: ecdata }] }; myChart.setOption(option); } }); </script>
</body>
代码运行的结果如下图所示:
- HighCharts代码示例
使用HighCharts展示DolphinDB数据的方式与Echarts类似。下面是HighCharts的示例脚本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="DolphinDBConnection.js"></script>
<script src="DolphinDBEntity.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript"> var conn = new DolphinDBConnection('http://localhost:8848'); //向DolphinDB发送查询脚本,并获取返回的数据 conn.run("select avg(ec) as ec from iotTable group by second(time)", function(re){ if(re.resultCode&&re.resultCode=="1"){ alert(re.msg); } else { jobj = new DolphinDBEntity(re).toVector();//将返回结果转换成列数据 var time = jobj[0].value; var ecdata = jobj[1].value; var option = { chart: { type: 'line' }, title: { text: '温度' }, xAxis: { categories: time }, yAxis: { title: { text: '温度' } }, series: [{ name: '平均温度', data: ecdata }] }; var chart = Highcharts.chart('main', option); } }); </script>
</body>
</html>
运行结果如下图所示:
- 干货丨时序数据库DolphinDB数据导入教程
- 干货丨时序数据库DolphinDB历史数据回放教程
- 干货丨DolphinDB与MongoDB在时序数据上的对比测试
- vue.js前端开发,利用echarts组件实现动态数据展示
- Android实战简易教程<十六>(LineChart实现数据趋势展示)
- Android实战简易教程-第十六枪(LineChart实现数据趋势展示)
- 【广告】免费领大前端视频教程,都是干货,等你来拿!
- vue elementUI 单选框默认值不选中,子组件传输数据 不展示
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
- 干货丨DolphinDB与Elasticserach在金融数据集上的性能对比测试
- Python系列视频教程: Django【13讲】第12讲 数据展示
- ECharts图表组件入门教程:如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
- 一对多关系是前端展示数据问题
- sigma_grid表格数据展示及FusionChart图表展示示例
- 不要再吹水地球人听不懂的技术,咱来点干货!--中文前端UI框架Kit(二)kitjs组件代码解析
- DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据
- 基于.net webservices和Flex LineChart组件的动态数据监控
- angular4 + ts + es6 自造轮子,理解组件化操作。以及怎么应用一些需要数据展示的组件
- 图像处理工具包ImagXpress教程:Accusoft不同组件间的图像数据传递
- <纯干货-2>GAN视频教程part5-DCGAN实战及所有数据