Chart with dynamic points (combined wind speed and direction) - thingsboard

Question

In thingsboard, (how) can I use a dynamic character and colour as the points in a time series while using data from a different series as parameters?
What I am trying to achieve is a combined historic wind speed and direction chart like this:
I have two data sources:
Wind speed in km/h
Wind direction in degrees (0 is north, 180 is south)
The colour is based on wind speed and calculated by a static rule (e.g above 30km/h is displayed in red)

Answer 1

As far as I can tell this is not possible with the thingsboard charts (TbFlot). They seem to act as the (very handy) glue between the widget configuration and the underlying chart-library called Flot.
However, you can use the flot library directly from your widgets!
Just call
$.plot(self.ctx.$container, [[[0,0], [1,1], [2,1]]]);
to draw a chart.
I stumbled uppon some code in the flot documentation about customizing the data series and came up with this to make it work as a thingsboard widget:
self.onInit = function() {
let counter, f_drawCross, flotOptions;
counter = 0;
f_drawCross = function(ctx, x, y, radius, shadow) {
var size = radius * Math.sqrt(Math.PI) * 2;
if (shadow) {
return;
}
if (++counter % 2) {
ctx.moveTo(x - size, y);
ctx.lineTo(x + size, y);
ctx.moveTo(x, y + size);
ctx.lineTo(x, y - size);
}
else {
ctx.moveTo(x - size, y - size);
ctx.lineTo(x + size, y + size);
ctx.moveTo(x - size, y + size);
ctx.lineTo(x + size, y - size);
}
};
flotOptions = {
series: {
lines: { show: true },
points: {
show: true,
symbol: f_drawCross
}
}
};
$.plot(self.ctx.$container, [[[0,0], [1,1], [2,1]]], flotOptions);
};
It creates a chart in your widget container and draws (alternating) crosses as the data points. I think you will need some kind of counter/index to let the drawing method access the values of the current data point it is painting.