90 lines
2.9 KiB
HTML
90 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
|
<script type="text/javascript" src="js/Require.Config.js"></script>
|
|
<!-- <script type="text/javascript" src="../lib/echarts.min.js"></script> -->
|
|
<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js'></script>
|
|
<title>Baja echarts demo </title>
|
|
</head>
|
|
<body>
|
|
<div id="charts" style="width: 500px;height: 400px;"></div>
|
|
<script>
|
|
require(["baja!", '/file/lib/echars.min.js'], function(baja, echarts){
|
|
var chartDom = document.getElementById('charts');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
let data = [];
|
|
|
|
option = {
|
|
title:{
|
|
text: 'Dynamic Data & Time Axis'
|
|
},
|
|
tooltip:{
|
|
trigger: 'axis',
|
|
axisPoint:{
|
|
animation: false
|
|
}
|
|
},
|
|
xAxis:{
|
|
type: 'time',
|
|
splitLine:{
|
|
show: false
|
|
}
|
|
},
|
|
yAxis:{
|
|
type: 'time',
|
|
splitLine:{
|
|
show: false
|
|
}
|
|
},
|
|
series:[
|
|
{
|
|
name: 'Fake Data',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
|
|
var sub = new baja.Subscriber();
|
|
sub.attach('changed', function(prop, cx) {
|
|
function getData(comp){
|
|
let now = new Date();
|
|
let value = Math.randowm();
|
|
return{
|
|
name: now.toString(),
|
|
value:[
|
|
now.getTime(),
|
|
comp.getOut().getVale()
|
|
]
|
|
};
|
|
}
|
|
if (prop.getName() == 'out'){
|
|
if(data.length > 10){
|
|
data.shift();
|
|
}
|
|
data.push(getData(this));
|
|
myChart.setOption({
|
|
series:[
|
|
{
|
|
data:data
|
|
}
|
|
]
|
|
});
|
|
}
|
|
});
|
|
|
|
baja.Ord.make("station:|slot:/Random").get({Subscriber: sub})
|
|
.then(function(random){
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |