Plotly Scatter Plot Text as HTML/CSS

📊 Plotly Python
#21

I used the same function in my loop, x=pd.to_datetime(df3['D_DATE'].iloc[x]) - it doesn’t show the image(s).

But when check the dtype (print(df.D_DATE.dtype)), it says it’s already in a timestamp format: datetime64[ns]

I tried converting to other formats, and plotting the image on the chart to no avail:

df3['new_date'] = df3.D_DATE.values.astype(np.int64) // 10 ** 9 dtype = int64

df3['new_date'] = pd.to_numeric(df3['D_DATE'].values) // 10 ** 9 dtype= float64

#22

Try this workaround:

#23

In that solution, it appears they’re plotting x-axis in milliseconds since epoch by:
datetime.strptime("2018-09-24", "%Y-%m-%d").timestamp() * 1000

if string, otherwise:

datetime(2021,5,27).timestamp() * 1000

Here is my chart with x-axis as ms since epoch:

fig = go.Figure()

df["mod_date"] = pd.to_datetime(df["D_DATE"], format="%Y-%m-%d %H:%M:%S").apply(toTimestamp)

fig.add_trace(
             go.Scatter(x=df['mod_date'], y=df['Note'])
             ) 

df3 = df.dropna(subset=['Note']) #limit loop to only records with a note

for x, y in enumerate(df3['mod_date']):
      fig.add_layout_image(
         dict(
           source=myIcon,
           xref="x",
           yref="y",
           x=df3['mod_date'].iloc[x],
           y=1,
           sizex=0.5,
           sizey=0.5,
           xanchor="center",
           yanchor="middle",
           layer="above"
           )
      )

def toTimestamp(data):
    return data.timestamp() * 1000

This does not result in seeing the desired images along x-axis. The x-axis is now in timestamp, seeing labels that are no longer date, instead “1.5b 1.6b 1.7b”. and there are hover traces that notes are plotted; just no images. Pretty frustrating.

#24

Don’t convert your data, just where you want to plot the text annotations.

Or maybe you could place them with annotations instead of trying to do it at one go.

#25

@allsyntax,

The problem isnt that they arent showing up, the problem is that they are too small due to the massive scale of the x axis!

import plotly.express as px
import datetime
df = px.data.stocks()
from pprint import pprint

fig = px.scatter(df, y='GOOG', x='date', title='Population of European continent')
for i, r in df.iterrows():
    fig.add_layout_image(
        dict(
            source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Iris_setosa_var._setosa_%282595031014%29.jpg/360px-Iris_setosa_var._setosa_%282595031014%29.jpg",
            xref="x",
            yref="y",
            x=r['date'],
            y=r['GOOG'],
            sizex=604800*3000,
            sizey=0.1,
            xanchor="center",
            yanchor="middle",
            opacity=0.8,
            layer="above"
        )
    )

fig.show()

resulted in this:

image
image985×789 133 KB

#26

Wow. :person_facepalming: unbelievable. I didn’t think this was the case, as I would mouseover the expected points, and even try to zoom. But it didn’t matter. However, this is correct. I set the size like you did sizex=604800*3000 and I DO see the images now. Crazy. I sure beat this up from every angle trying to get it to work when it was seemingly there the whole time.

Can you explain your sizing efforts? I’ll need to read up on the auto resizing that happens.

I was about to try another way with the image on a secondary x-axis (index of D_DATE), with no data labels- which might have also worked. But no need.

1 Like
#27

Well.

I was wondering why we weren’t getting errors on it. So, I inspected and saw the width was 0. When I can fed it manually to 200px, it was there.

Then I knew it was a master of scale. I knew date time was treated as timestamp, which led to the first number, then 30 days for a month ish to get it big enough to see.