XY Plots without Time as X

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: [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.

Any suggestions or pointers welcome!

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!

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


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?


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.

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.

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 documentation

Hope it helps!

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?

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!

Thank you. I’ll dig in to both.

The download sample link is file-not-found:

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

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.