@Nicolas Kyriakou
Hello,
I would like to make a widget showing multiple variables as vertical columns that would show the last data taken. Something like this:
Is it possible?
Side question, is it possible to have more than 15 variables in a graph?
Hi @ovalknight,
You can use the Vertical column chart widget to display the values from the variables that you want.
By the way, you can add your variables by code or by adding in the widget.
The maximum of variables that you can add in the widget is fifteen variables. However, you can create as many variables as you want by managing the JSON.
In the image below I added 15 variables in the widget:
Hello,
I saw the vertical column chart but I don’t want them to be plotted in time I just want the last data given for each variable for visualization and that’s what I’m trying to figure out.
Where is the option to manage the JSON?
hi @ovalknight,
You can create/edit/remove your devices/dashboards/widgets using the TagoIO SDK in JavaScript. Here is the documentation to do it: https://js.sdk.tago.io/en/latest/account.html#id26.
For my question regarding the columns, is it possible to do what I asked before? Say instead of time I have a variable array of numbers(e.g array[1,2,3,4…20]) and use those as the object and then denote the position of each variable to that array(e.g var1 to array[1],var2 to array[2]). Or do I need to make the changes by code?
Also for the SDK, for what I am trying to do, I need the TagoPlatform to run internally. Is the SDK only used to initialize the settings for my platform and then just continue using the site as normal or will I have to run it externally every time I need to use Tago?
hi @ovalknight,
You can change the variable array using the front-end (editing widget) or by SDK.
SDK is used to you create/edit/remove things in an automated way.
Ok, I’m going to use some visual clarity to make my question clearer. Lets remove the SDK part of the question for clarity’s sake and focus solely on the task of visualization.
For instance I have this column widget:
What I want is for it to not be plotting in time but having each variable represented only once like I originally showed above:
By the way I have tried the “Maximum number of points to be displayed” to be on 1 and it shows me nothing, while if I put it on 2 it gives me 2 points:
1 point:
2 points:
I am not sure if this is a bug or a mistake on my end. If it is a bug and it was supposed to display the last point of data then I could use that and my problem would be solved.
Anyway moving on.
So going by the image on the widget lets say the last data given was from delta9 and delta7, the other deltas are empty so it would look something like this:
Hi @ovalknight,
I think I have the exact same need you describe. Want to plot on X axis not time but a series of variables, and for each a vertical column representing the current value of this variable. My context is representing the mass concentration of particulate matters of different size ranges. Here is a example of what I want:
–> Did you get a way to do this?
Or someone else can help please?
@Nicolas Kyriakou
Hey, no I didn’t find a way to do it personally but I would still be interested in this topic as well if anyone knows.
@Vitor Lima
Hi @ovalknight and @philippe.marin2
I think you both have very good questions.
The best way to achieve your needs is using a custom widget. I have one example here that you can use: https://api.tago.io/file/5bbcb03b667d7a002e56664b/iframes/barChart.html
In order to use the custom widget, follow those steps:
- Select the Custom Widget
- Enter the URL I sent you above.
- Select the variables you want to show.
- Edit the parameters as variable for key, and value for the label.
At end, you should have a solution like this:
You can download the html and do changes if needed. This custom widget was made using G2 from AntV (https://g2.antv.vision/en/examples/gallery/column#column2).
On another hand, there is indeed a way to do the same thing using TagoIO charts, that is by using a variable for the X axis, and then setting all your variables to have the same serie as the data from the X axis. But it seems too much for the simple feature you requested.
@Philippe MARIN
Oh thanks a lot @vitor for this Custom graph. It does exactly the basic bars I needed. I’m surprised this is not a standard graph in TagoIO!
In fact I’m not confident with this kind of programing. But a nice complement would be to add the possibility to put colors on bars depending on threshold values, as it is possible with the “Cylinder” widget.
If someone can add this color feature with a little effort… 
Thanks again.
@Nicolas Kyriakou
vitor:
[https://api.tago.io/file/5bbcb03b667d7a002e56664b/iframes/barChart.html](https://api.tago.io/file/5bbcb03b667d7a002e56664b/iframes/barChart.html)
Thank you Vitor that is what I wanted.
@SA
@vitor I am trying to display this custom bar chart with data (say temperature) from two devices. But it is showing only one bar. Am I doing something wrong or under this scheme only one device with multiple values will work?
@Andrés
Hello @vitor,
thanks for the widget, I have two questions related to it:
-
Is it possible to change the colors of the variables? Just like in the normal bar widgets? I think the link to the html file is down.
-
One of my variables allias is not changing (I attach images). Why could this be?
Also, if the colors can’t be changed how could I implement this kind of graph using the normal bar widget? I’ve tried sending a “group” variable for the X axis and selecting group by data but it creates 3 new bars whenever new data is added.
Thank you for your time!
@Rafael Teles
Hi @velo-energy,
You can change the colors editing the HTML code, and use the g2 documentation.
G2
The Grammar of Graphics in JavaScript
But, you can use the widget “Vertical Column” on Tago IO to make this widget.
See topic 2 on this documentation:
https://docs.tago.io/en/articles/510-vertical-column-widget
And, the variable allias is not working because the key is not write correctly.
The correct key is : charging_session_solar_energy
I hope it helps.
Best Regards, Rafael Teles.
@Andrés
Hello @rafael.teles,
thank you for your answer and sorry for the silly question about the typo (I completely missed that one). On the other side, I kinda managed to use the vertical column widget as I intended by limitting the amount of displayed values to 1. However it is a little buggy since, I need to refresh the page everytime new data comes in in order to show just the one series instead of several of them. Do you how can this be fixed?
Without refreshing:
Refreshing (expected behaviour)
Thanks!
Regards,
Andrés
@Klaus Borges
Hi @velo-energy,
Thanks for contacting us! Can you show a screenshot of your charts configuration? I need to understand it better to pinpoint the issue and see if our team needs to discuss the necessary changes to fix it or it’s a simple bug.
I did understand what you are trying to achieve, I need more details on the configuration to try and reproduce it.
Regards,
Klaus
@Andrés
Hello @klausb,
thanks for your fast reply. Sure, I attach some screenshots of the configuration for the vertical widget.
This charging_session_group variable is always sent (with same serie code) with the data to be displayed, and the value is always equal to “1”.
I haven’t changed any other configuration parameters. Just to be clear, I only want a single bar (if stacked) or 2 bars (if not stacked) showing the last value of these variables: charging_session_solar_energy and charging_session_grid_energy
I hope this helps with the debugging! Thank you for your time!
Best regards,
Andrés