Data chart front-end components are widely used in the Internet of Things and real-time monitoring scenarios. Currently, Echarts, HighCharts and other components are more popular. This article mainly explains how to display DolphinDB time-series database data through DolphinDB's web data interface and JavaScript.
DolphinDB provides an interface based on the HTTPS protocol, which can submit query statements through HTTP post and return the results in JSON format. For specific usage, please refer to DolphinDB Web API .
The return data format of DolphinDB is a columnar JSON string. For example, a table returns JSON as follows:
{
"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]
}]
}]
}The data format required by Echarts front-end components is as follows:
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'
}]
};From the structure of the two, only a slight conversion of the return result of DolphinDB can meet the data format specification of Echarts. Using the DolphinDB Web API development kit can make the conversion easier.
The following example introduces how to use Echarts and HighCharts components to display data in DolphinDB.
1. Echarts code example
Suppose the following scenario: There are 10 devices in the factory. The temperature data is collected every millisecond and written into the DolphinDB distributed data table, and the average temperature per second line graph is displayed on the web page.
Generate 10 seconds of data in DolphinDB through script simulation.
data = table(100000:0, `devId`time`ec,[INT,TIMESTAMP,DOUBLE]);
data.tableInsert(take(1..10,10000),add((1..10000),now()) , norm(1,0.5,10000))
share data as iotTableGet data from DolphinDB through JavaScript script and convert it to the format required by Echarts. The DolphinDB JavaScript interface development kit (download address: https://github.com/dolphindb/api-json ) is used here, and two js files, DolphinDBConnection.js and DolphinDBEntity.js, are introduced.
<!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>The result of running the code is shown in the figure below:
2. HighCharts code example
Using HighCharts to display DolphinDB data is similar to Echarts. Below is a sample script of 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>The running result is shown in the figure below:
If you have any questions during use, you can join the DolphinDB technical exchange group, Zhinian Technology: DolphinDB technical exchange group, which contains a QR code .