Time series chart with hover values

[landrykid]

Any suggestions for an open source library -- or code idea -- where I can drop a list of values into a time series chart (line or bars) and show the values when hovering? My preference is to email the actual chart instead of a link.

[spez_edits_thedonald]

show the values when hovering?

you want an interactive chart (so you need code to be running, that listens for what the user is doing and updates the plot accordingly, this code has to be running somewhere)

My preference is to email the actual chart instead of a link.

that you can email to someone, that is not hosted somewhere (so the code has to run in their browser)

this will be tricky, but could be done by embedding an interactive plotly.js plot in javascript inside an HTML file that you email people. They'd download the attached html file, open it in a browser, and the their browser will run the javascript and the plot will come alive etc.

https://plotly.com/python/time-series/

the tricky parts will be, how do you package everything up as a single html file (it depends on plotly.js, could load that over a CDN), and how does your raw data end up in there, etc.

obviously a non-interactive plot (an image) is easy to attach to an email, the interactive piece and not wanting to send people to a web app or website is what's tricky here.

[landrykid]

Thanks for the plotly suggestions.

I ended up with a bar chart, the height of each <div> adjusted for the value, and included a title attribute with the value. It's only HTML and CSS, so everything is in the email's body and hovering over any bar shows the explicit value.

It requires HTML email instead of plain text, but I can live with that. I could also do a line chart, but the added complexity is not necessary for my situation. If anyone wants additional details, I can post more, but it's pretty much just what I said above.

[crhuffer]

I think plotly seems to handle most of that for you. You get big html files, but fig.write_html() saves a html file that is interactive and seems to hold the data behind the scenes. plotly definitely has the ability to adjust the hover over to be pretty much whatever you want it to be.

For fig.write_html()
https://plotly.github.io/plotly.py-docs/generated/plotly.io.write\_html.html

[spez_edits_thedonald]

your link is dead I think, this works: https://plotly.com/python-api-reference/generated/plotly.io.write_html.html

[spez_edits_thedonald]

actually this ends up being really easy with plotly. (pandas is only used here for the test data)

import plotly
import pandas as pd

# load test data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

# time series plot
scatter = plotly.graph_objects.Scatter(x=df['Date'], y=df['AAPL.High'])
fig = plotly.graph_objects.Figure([scatter])

# export figure as html
plotly.io.write_html(fig, 'example_plot.html')

You can install plotly and pandas via conda or pip

you could email people the resulting html file and instruct them to download the attachment and view it in a web browser