New widgets: Testing with Apex Charts

During some days I have been working with Apex Charts to provide Thinger.io new widgets, with a lot of possibilities: zoomable elements, download CSV, download chart picture, and a much more precise customization as the user will be able to modify the raw code of the widget.

Here it is a preview of this work in progress (just the widget configuration modal with a preview of the resulting chart):

Let me know what do you think! :slight_smile:

4 Likes

I love every additional widget we can get in the portfolio.
Possibly this could be an answer to provide vertical bargraphs?

Could you also consider the very basics:
-numeric value input?
-incremental value input (up down attached to a value display)?
-binary display through switching texts?
-binary display through switching user provided jpg’s ( e.g. valves, motors, pumps…)?

Yes, of course. All widgets you see in the animation are working right now (internally), including vertical bars.

Yes, I have noted them from your previous posts :wink:

Looks great. We are looking forward. It would be great if you add changeable time range selection.

I agree, this feature could be very useful, something that depends on an external time/date field (or widget?), so it can be choosen in “range time” (at the widget configuration), something like “external time/date field input” so all graphics with that will be modified when the time range is modified in the external time/date field.

The need is to change the time selection easy for multiple graphic widgets, it helps a lot when is needed a multiple variable graphic analisys.

2 Likes

Looks promising! I’m really looking forward to the zoom feature! As I’ve mentioned in other threads, I use energy monitoring software that does this well and allows me to look at an overview, find interesting or surprising places and zoom to those to find out what happened and when. Since my thinger project is remote monitoring, I expect that same type of use for the visual widgets. Of course automated actions already help with remote monitoring.

Thanks to everyone for the feedback. All your suggestions are considered for future releases :wink:
@rin67630, @yasary, @Damon, I have pushed a beta on https://eu-west-beta.aws.thinger.io that can work with your community accounts. If you want to give a try and test new apex charts, it would be great!

If anyone with private instances want to give it a try, just write me, as ApexCharts shine with aggregated data feature available in private cloud instances.

1 Like

First of all, it is a great widget.
I want to give feedback.

*If “From Device Source” is selected the chart input, the legend name does not shows.
*It would be better if the Legend names can be changed independently of the device. For example, on the device side, its name is Analog 1, but I should be able to show it as Temperature on the chart.

*All settings are reset each time the chart is refreshed. For example; legend selecting, zoom or menu click.
If the interval time is too low, it is not possible to download csv files.
Stop refresh mode button can be added.

Hi @yasary, thanks for the feedback!

  • Yes, agree that the legend text should be configurable in the chart (almost have it), and the color, as for now it only display with stock library colors.
  • The “reset” problem is something within the library: https://github.com/apexcharts/apexcharts.js/issues/643 will take a look to the stop refresh button or a similar approach…

Some other problems I have noticed:

  • The CSV does not correctly provide the timestamp of the measure
  • Tittle and subtitles does not correctly update the placecolders, i.e, {{data.bucket.id}}
1 Like

Reposting the email here:
Hi Alvaro,
thank you for letting us test.

I made a first attempt, I miss a manual describing the syntax, maybe I have to make a big research on the Internet…
Have you got a source of documentation?

The first result is encouraging:
image.png
We see however the well-known problem from the thinger.io bucket data having a ridiculous high amount of decimals popping here again.
I know the workaround with the conversion to text, but that could not be a long-term solution.
I will test a bit more tomorrow if I can find the syntax to use, to activate other charting options.

Regards and thank you for all the beef…
Laszlo

Hi @rin67630 , Apex Charts is a well-known graphics library, that is fully documented, with plenty of examples, and great community support. More details here: https://apexcharts.com.

Will add a link on the widget configuration for the docs :wink:

Can you upload the picture with the decimals? If this is a formating problem, it can be solved by configuration.

HI
Can you also give me access to the beta platform?
Kr
Gus

We have been using google charts and the html widget you get similar charts to apex a little more polished maybe. they are zoomable scrollable and lines columns etc selecable. Only problem detected is they leak memory so freeze the browser if you leave them open.

Ok Alvaro, I must have been tired that night, today it appears to me easier to understand.
I had posted the picture with the high number of decimals in my very message, don’t you get the pictures?, you get them when you are plotting from buckets with data labels enabled.

here again for the case it were not transmitted to first-time:

Regards
Laszlo

[quote]
Possibly this could be an answer to provide vertical bargraphs?
Yes, of course
.[/quote]

Not exactly how I imagined it as a replacement for the missing vertical bar graph widget:
I could not tweak it to show only the lastt bar.
It always shows at least two bars, even with sampling interval 5 seconds and time period as short as 1 second.
image
Better then nothing, but the second bar graph is confusing, people would expect two distinct measures.
Regards.
Laszlo

Hi,
Can I have a try on my private instance?
I am trying to develop a dashboard for multiple variable comparison and it will be much better if they could be plotted on such a beautiful widget.

You can already plot many variables together if you store them in a bucket and open a time series widget to that bucket.

Yes, I can use the time series chart to plot them, but there are only a few options for me to choose in the time series chart and it will be difficult to plot a beautiful figure. I’d like to try if these new features can improve the appearance of my dashboard.