Is there a way to plot a plotly chart in a backend server, and to send the interactive results on a webapp?

So, I'm actually making all computations in backend, generate a chart in (.png), save it to a pathfile, and communicate through AJAX the link to this newly generated image. However, such process allows me to transfer an image only. I'm basically converting the plot to an image.

I wonder if there is a way to transfer the entire plotly output, as an interactive chart through AJAX.

import yfinance as yf
import plotly.graph_objects as go

aapl = yf.Ticker('AAPL')
ainfo = aapl.history(start=datemin, end=datemax)

#Plot the Chart
fig = go.Figure(data=go.Scatter(x=ainfo.index,y=ainfo.Close, mode='lines'),)

#DB inject plot
fig.write_image("/Users/Xlibidish/Desktop/Django/static/"+tickerZ+rx+".png")


#And then communicate the path through AJAX etc.

I'd like to send to my Webapp the plotly output. I have some hints:

  1. Generate the plot in my Webapp directly in JS, so the backend sends only the data from yfinance and a directive to generate it. (Quite complex, especially knowing that I have various types of plots, which are all generated in python so the Webappp is only receiving Images at this time without differentiating them).
  2. Create an iframe directing to the plotly output ports, but not sure about this one ! And also, I need to save the plot results in a DB.

try fig.to_html()

To be honest, I do not even know what AJAX is. So I am not using AJAX but I still manage to display the entire interactive chart on my "website".

Maybe this gives you some guidance and you can figure out the AJAX part for yourself.

def _give_fig():
    data = # input your data here
    layout = # input your layout here
    fig = go.Figure(data=data, layout=layout)  # build your figure with data and layout
    fig.update_layout(template='simple_white')  # modify your fig until ready
return fig.to_html(config={'displaylogo': False}, include_plotlyjs=False, default_width=790, default_height=600)

# returns chart as html
# displaylogo False to hide the plotly logo in chart
# default width and hight self explanatory
# include_plotlyjs --> important!


def your_view(request):
    context = {"your_plot": _give_fig()}
    return render(request, 'app/your_template.html', context)

Read more about include_plotlyjs here. You can put it to True and then it will directly include the javascript. It is about 3 mb I think. I personally use the CDN. So have a look at my template:

your_template.html:

{% extends 'base.html' %}

{% block styles %}
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{% endblock %}

{% block content %}
{% autoescape off %}
{{ your_plot }}
{% endautoescape %}
{% endblock %}

Yeah, that works without the AJAX. Good luck trying to fiddle it in.

Back to Top