XY Plots without Time as X

@Graeme Rae

I have a bucket with 3 variables. Temperature, Conductivity and Depth, all recorded at the same time (or close enough). I need to be able to plot X-Axis: Temperature, Y-Axis: Depth, with 0 at the top and increasing down) Here’s an example of something similar:

My data is inserted with a ‘serie’ tag that ties the data together (

2021-11-09 14:52:02: Raw payload: {"variable":"depth","unit":"m","serie":31,"value":"16.232009272342100"}
2021-11-09 14:52:02: Bucket [87c6]: 1 Data Added
------
2021-11-09 14:52:02: [POST] HTTP Request: From: 24.25.220.71 [python-requests/2.22.0] - Content-Type: application/json - Token Ending: 9c326
2021-11-09 14:52:02: Raw payload: {"variable":"water_temperature","unit":"C","serie":31,"value":"9.0998270311496300"}
2021-11-09 14:52:02: Bucket [87c6]: 1 Data Added

But I am unable to plot the data as I wish. I tried following along here which seems to be similar solution, but I have a feeling the interface has changed significantly since this was written about 2 years ago.

Is it possible to assign a variable to chart X axis?

Is this what you want? [\[image\]](https://api.tago.io/file/5bbcb03b667d7a002e56664b/community/1a88bf23d9840d3a3207d8773b4dffde7b06654c.png "image") To achive this it’s quite simple, actually. You need 2 variables: let’s call them plot\_value and temperature. plot\_value is the x axis, so you will need to send a value for each tick on that axis. The structure that should be sent is this: \[ { "variable": "plot\_value", "serie": 1, "value": 1 } \] serie is very important. For each new value, increase the serie field by 1 (1, 2, 3…). Because everytime that you send the data with a different serie…

Any suggestions or pointers welcome!

@Klaus Borges

Hi @graemerae,

We had an issue with the widget configuration for the X axis variables in Charts, but it should be fixed now. You will have to edit the widget and save it, but before saving it you will need to check if the variable for the X axis was duplicated in the “Data from” accordion:

If it looks like the image above, remove the variable you are using for the X axis groups from the variables in the “Data from” (in my image it’s line_chart_groups), and then save. If it’s not duplicated, only saving the widget should solve the issue.

Let me know if this helps you!

@Graeme Rae

It’s getting closer, but that doesn’t work the following settings. I end up just getting depth plotted against depth.

@Phil Gutierre

Hi @graemerae

You said “it’s getting closer”, what else is missing now for you to achieve your goal?

Is that the value on the axis is correct but the graph is incorrect?

Thanks!

@Graeme Rae

The graph I have is X-depth vs Y-depth - I need X-Temperature vs Y-depth.
The graph is set up as I expect (I have two different variables) but it’s just plotting depth vs depth which is a straight diagonal line.

@Graeme Rae

Did you see the reply to this? The graph is showing the same variable on both axes. I cannot do a mixed plot of data.

@Phil Gutierre

Hi @graemerae

Unfortunately, I guess it’s not possible to achieve what you want with the Line Widget for the following reasons:

  • All variables on Axis X need to be sent in series (i.e 4.1, 4.2, 4.3…).

  • You can’t associate more than one Y-Axis to the X-Axis, which means you’re not able to send depth = 9m to temperature = 4 and then send depth = 8m to temperature = 4. The chart will only show the last depth associated with the temperature.

The closer we could get was this:

As you can see, we couldn’t show decimal temperature values because they’re not visible on the X-axis.

I suggest you to create a Custom Widget. Here are some documentation that might help you with that:

Custom Widget (iFrame)

Hello everyone, In this tutorial I’ll explain the ins and outs of Custom widgets, as well as how to build one yourself. The new custom widgets type is now available in the latest version; this type allows you to create a widget with custom content and then display it on your dashboards. To learn more about Custom widgets, click [here](https://docs.tago.io/en/articles/450). In the following paragraphs, I’ll teach you how to build your own Custom widget. Before you proceed, I recommend that you read about the specifications of this t…

Custom Widget documentation

Hope it helps!

@Graeme Rae

Sounds good - I’ll get to work on a custom widget. On this page https://docs.tago.io/en/articles/450 there are a number of examples. Can you post the underlying code that makes these plots?

@Phil Gutierre

Hi @graemerae

Unfortunately, we don’t have the code for those widgets. However, I suggest you take a look at this post: Custom Widget (iFrame)
There you can find this link (Right and click → Save as) to download a sample.

About the widgets in the documentation page, they were produced using library: https://g2.antv.vision/en

Hope it helps!

@Graeme Rae

Thank you. I’ll dig in to both.

@Graeme Rae

The download sample link is file-not-found:

" There you can find this link (Right and click → Save as) to download a sample."

@Phil Gutierre

Hi @graemerae

Thanks for informing me of that! I just fixed the link on that post.

Here it is: sample

Let me know if it works for you.