Making Custom Graph Object Types

📊 Plotly Python
,
1

I’m a scientist looking for ways to display timeseries data of various types all in one place. I find the make_subplots function and fig.add_trace method very useful, because it allows me to take multiple plots of different types (for example, go.Scatter, go.Bar, etc.) and plot them as separate graphs in different rows and columns. In this way, I can capture different aspects of data in each plot, and even use the shared_xaxes=True option to enable the entire column to line up.

However, I often find myself wanting to create plots that are combinations of various plot types (e.g. Scatter and Bar plots). One use case would be where each plot describes a different piece of equipment, and each piece of equipment has a temperature as a function of time (implemented with Scatter), as well as a timeline of when a heater is turned on (implemented with Bar), which are to show up in the same graph “entity”. I know how to create these two plots as separate traces, which is fine, but I’d like to abstract this tandem graph object by promoting it to its own class (just like Bar or Scatter), such that I can add, remove, place, and customize it with the same workflow as I do with Scatter, Bar, and allies.

Here’s a very simple, schematic example showing my workflow:

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create some example data
x = [1, 2, 3, 4, 5]
y1 = [2, 4, 6, 8, 10]
y2 = [5, 6, 7, 3, 12]
y3 = [11, 10, 8, 4, 3]

# Setup raw figure
fig = make_subplots(rows=3, cols=1, shared_xaxes=True)

# Add traces for all three devices:
fig.add_trace(go.Scatter(x=x, y=y1, name="Device 1"),row=1,col=1)
fig.add_trace(go.Scatter(x=x, y=y2, name="Device 2"),row=2,col=1)
fig.add_trace(go.Scatter(x=x, y=y3, name="Device 3"),row=3,col=1)

# show the plot
fig.show()

What I’d like to be able to do is make my own class like go.Scatter that can handle something a bit juicier, which would know how to make my bundled graph type – complete with both its scatter and timeline data. It would look something like this:

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create some example data
x = [1, 2, 3, 4, 5]
y_temperature_1 = [2, 4, 6, 8, 10]
y_bar_timeline_1 = <some bar data here>
y_temperature_2 = [5, 6, 7, 3, 12]
y_bar_timeline_2 = <some more bar data here>
y_temperature_3 = [11, 10, 8, 4, 3]
y_bar_timeline_3 = <even more bar data here>

# Setup Raw Figure
fig = make_subplots(rows=3, cols=1, shared_xaxes=True)

# Add traces for all three devices:
fig.add_trace(go.ScatterAndTimeline(x=x, y_temperature=y_temperature_1, y_bar_timeline=y_bar_timeline_1, name="Device 1"), row=1, col=1)
fig.add_trace(go.ScatterAndTimeline(x=x, y_temperature=y_temperature_2, y_bar_timeline=y_bar_timeline_2, name="Device 2"), row=2, col=1)
fig.add_trace(go.ScatterAndTimeline(x=x, y_temperature=y_temperature_3, y_bar_timeline=y_bar_timeline_3, name="Device 3"), row=3, col=1)

# show the plot
fig.show()

Here is an example of what I’m expecting the result to look like:

IMG_7449.HEIC
IMG_7449.HEIC4032×3024 2.19 MB

Are there any plotly wizards that could help me find a way to achieve what I’m looking for here?

2

Hi @danthewalsh welcome to the forums.

just to understand you correctly: You do not want to add the bar traces manually like so (just adding this line after your example workflow):

fig.add_trace(go.Bar(x=x, y=y1), row=2, col=1)

which leads to
newplot (2)

Instead you want to specify the scatter trace and bar trace in one function call?

3

Hi again, actually you can do what you intend to do. Just change this line

into:

fig.add_traces(
    [
        go.Scatter(x=x, y=y1, name="Device 1"), 
        go.Bar(x=x, y=y1, name="Bars Device 1")
    ],
    rows=[1, 1], 
    cols=[1, 1]
)

If you don’t want to show the bar trace in the legend, you can use showlegend=False

Full code:

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create some example data
x = [1, 2, 3, 4, 5]
y1 = [2, 4, 6, 8, 10]
y2 = [5, 6, 7, 3, 12]
y3 = [11, 10, 8, 4, 3]

# Setup raw figure
fig = make_subplots(rows=3, cols=1, shared_xaxes=True)

# Add traces for all three devices:
fig.add_traces(
    [
        go.Scatter(x=x, y=y1, name="Device 1"), 
        go.Bar(x=x, y=y1, name="Bars Device 1", showlegend=False)
    ],
    rows=[1,1], 
    cols=[1,1]
)
fig.add_trace(go.Scatter(x=x, y=y2, name="Device 2"),row=2,col=1)
fig.add_trace(go.Scatter(x=x, y=y3, name="Device 3"),row=3,col=1)

# show the plot
fig.show()

newplot (3)

See also:
https://plotly.com/python-api-reference/generated/plotly.graph_objects.Figure.html#plotly.graph_objects.Figure.add_traces

4

@danthewalsh If you want to display two different traces in the same subplot cell, but referenced to the same xaxis and distinct two yaxes, like in this plot:

subplots-2-yaxes
subplots-2-yaxes900×500 31.8 KB

then here https://chart-studio.plotly.com/~empet/14352 is the code generating this image. It is displayed as being 6 year old, but I checked it just now, and it works

5

Thanks for the welcome! A couple of clarifications:

  1. The bar plots are used to make a timeline (a.k.a Gantt chart), mimicking plotly.express.timeline.
  2. Each column in the figure should have the same format (with both scatter and timeline plots, with the timeline plot directly under the scatter plot, in two sub-rows, forming a single column entry).

In the example you provided, there are a few issues:
First, as I mentioned, the bars should be horizontal a la plotly.express.timeline to make a Gantt chart. (I already know how to make a timeline chart, though, so perhaps let’s not focus on trying to solve this issue for the sake of clarity and expediency here. If you’re curious, it looks something like this):
Second, only the middle plot has the bars – instead all rows should have both scatters and bars.
Third, I’d like the timeline bars to appear on separate “sub-rows” below the axes containing their respective scatters. After all, the y-axes for the boolean values in the timeline are not temperatures. Having them overlaid is not a dealbreaker if there is no way to split the traces into two sub-rows as I described.
Fourth – and most importantly – in your example, the bars are being added in a separate function call to the scatters. While this can still be used to produce the same desired output, It requires the programmer to do manual bookkeeping to assign which row applies to which device, instead of adding both scatter and timeline data in a single function call, which is much cleaner, and less prone to fat-fingering.

6

I think this is a step in the right direction. I’ve added some clarifying explanations in response to your other answer. I really like how fig.add_traces enables multiple traces to be added at the same time. I’ve added an example mock-up of what I envision in the question details above.

7

Thank you, empet, for your thoughts. I like that your answer involves allowing for two separate yaxes. To clarify, I’m actually looking to use the Bars horizontally as a Gantt chart, as is done in plotly.express.timeline (for an example, see this) Can this solution be used in that case, too? I’ve edited the original question to show a mock-up of the kind of layout I’m going for.