rossmann-engineering / Collibellex-Thingsboard-Widgets

Widget Library for Thingsboard
MIT License
163 stars 72 forks source link

[Feature Request]: Wind Rose & Polar Histogram #6

Open hz14np opened 2 years ago

hz14np commented 2 years ago

Hi,

Thank you for your great work! Simply love it!

Would you happen to be working on a Wind Rose chart (example: https://jsfiddle.net/y64cLs5j/2/) or a Polar plot with binned histogram (example: https://www.mathworks.com/help/matlab/ref/polarhistogram.html) chart widgets?

Cvd0 commented 6 months ago

@hz14np did you happen to find a working wind rose chart?

X1folta commented 6 months ago

You can add basically any visualization library into Thingsboard inside the widget under 'Resources' and start right off. I use primarily Echarts and add it via:

https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js

You then need to add it to the widget container through:

`
let divId = 'barStackedColumn_'+self.ctx.widget.id; div = document.createElement('div'); div.style = 'height: 100%; width: 100%; margin:0'; div.setAttribute('id',divId); self.ctx.$container.html(div);

self.ctx.$scope.datasource = self.ctx.defaultSubscription.datasource;
self.ctx.$scope.data = self.ctx.defaultSubscription.data;
option.title.text = self.ctx.widgetTitle;

myChart = echarts.init(div);
self.ctx.myChart = myChart;

myChart.setOption(option);

`

This is a part of a starting template I use when creating new charts. Important to note is that 'option' is the chart configuration seen as in examples of Echarts like this sunburst for example. While Thingsboard has amped up production of certain widgets as of late you cant know for sure, when a widget will drop that fits your requirements. Therefore I advise on trying it yourself.

Cvd0 commented 6 months ago

Alright, thank you for the headstart @X1folta, I will try and write one myself!