I want to create my linear timeseries widget in thingsboard but i need some custom features not included in the default version.
Configuration provided as an example byThingsboard:
The Chart.js library: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js HTML Canvas: JS Code:
var myChart;
self.onInit = function() {
var chartData = {
datasets: []
};
for (var i=0; i < self.ctx.data.length; i++) {
var dataKey = self.ctx.data[i].dataKey;
var dataset = {
label: dataKey.label,
data: [],
borderColor: dataKey.color,
fill: false
};
chartData.datasets.push(dataset);
}
var options = {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
ticks: {
maxRotation: 0,
autoSkipPadding: 30
}
}]
}
};
var canvasElement = $('#myChart', self.ctx.$container)[0];
var canvasCtx = canvasElement.getContext('2d');
myChart = new Chart(canvasCtx, {
type: 'line',
data: chartData,
options: options
});
self.onResize();
}
self.onResize = function() {
myChart.resize();
}
self.onDataUpdated = function() {
for (var i = 0; i < self.ctx.data.length; i++) {
var datasourceData = self.ctx.data[i];
var dataSet = datasourceData.data;
myChart.data.datasets[i].data.length = 0;
var data = myChart.data.datasets[i].data;
for (var d = 0; d < dataSet.length; d++) {
var tsValuePair = dataSet[d];
var ts = tsValuePair[0];
var value = tsValuePair[1];
data.push({t: ts, y: value});
}
}
myChart.options.scales.xAxes[0].ticks.min = self.ctx.timeWindow.minTime;
myChart.options.scales.xAxes[0].ticks.max = self.ctx.timeWindow.maxTime;
myChart.update();
}
And the output:
Thingsboard timeseries example
Well as you can see the X axis its defined as time and the "First" and "Second" are the datasource generated by the ctx object.
-So what do i need? As you can see both datasource coloured never change and i want to change the color by the following situations: if the value of (Y axis is > 50 and < 70 ) and during 6min (X axis) then colour green if the value of (Y axis is > 70 and < 90 ) and during 6min (X axis) then colour orange if the value of (Y axis is > 90 ) and during 6min (X axis) then colour red By default the colour will be grey lets say in this example.
I have tried to create the chart using the Chart.js library and inject it in TB but the X axis isn not the same as i expected because i need the same X axis like i showed before in the picture above.
Also i have tried this with another library, Highcharts, but the result is this: HighCharts try
The library used: https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.min.js
self.onInit = function() {
//self.ctx.flot = new TbFlot(self.ctx);
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
color: {
linearGradient: [500, 0, 100, 0],
stops: [
[0, 'red'],
[1, 'green']
]
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
}
My knowledge about JS is basic and im investigating how this charts works for this libraries but i dont get how TB charts works, exclusively how the X axis works and update.
X axis Update method:
self.onDataUpdated = function() {
for (var i = 0; i < self.ctx.data.length; i++) {
var datasourceData = self.ctx.data[i];
var dataSet = datasourceData.data;
myChart.data.datasets[i].data.length = 0;
var data = myChart.data.datasets[i].data;
for (var d = 0; d < dataSet.length; d++) {
var tsValuePair = dataSet[d];
var ts = tsValuePair[0];
var value = tsValuePair[1];
data.push({t: ts, y: value});
}
}
myChart.options.scales.xAxes[0].ticks.min = self.ctx.timeWindow.minTime;
myChart.options.scales.xAxes[0].ticks.max = self.ctx.timeWindow.maxTime;
myChart.update();
}```
Note: depending which version of the library we use this method changes.
If anyone who experimented or created before a custom timeseries chart in TB please let me know any useful information because from TB i didnt find to many helpful documentation.
PD: its my first time creating a question in StackOverflow
