1

I am using Django to create my first website. I have some complex plots made with Plotly which get passed to the render function as html (saved using to_html function). For example:

def sample_plot():
    import numpy as np
    import pandas as pd
    import plotly.graph_objects as go

    fig = go.Figure()

    fig.add_trace(go.Barpolar(
        r=[77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
        name='11-14 m/s',
        marker_color='rgb(106,81,163)'
    ))
    fig.add_trace(go.Barpolar(
        r=[57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
        name='8-11 m/s',
        marker_color='rgb(158,154,200)'
    ))
    fig.add_trace(go.Barpolar(
        r=[40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
        name='5-8 m/s',
        marker_color='rgb(203,201,226)'
    ))
    fig.add_trace(go.Barpolar(
        r=[20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
        name='< 5 m/s',
        marker_color='rgb(242,240,247)'
    ))

    fig.update_traces(text=['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'])
    fig.update_layout(
        title='Wind Speed Distribution in Laurel, NE',
        font_size=16,
        legend_font_size=16,
        polar_radialaxis_ticksuffix='%',
        polar_angularaxis_rotation=90,

    )
    return fig.to_html(config={'displayModeBar': False})

Sample plot

This is rendered as follows:

sample_plot = sample_plot() 
context = {'plot':sample_plot, ... other stuff ... } 
return render(request, 'webpage.html', context)

Just passing this plot to the webpage (including it in context) increases loading time by 2.1 seconds (comparison using local server and same conditions). I have a few plots as complex as this one so the loading times make the webpage unusable.

Is this behaviour expected? Is there a better approach than using to_html to render the Plotly graphs? or is Plotly a non starter for webpage plots? Sorry if it is a basic mistake, it is my first website.

Loading times comparison

10
  • I am not aware of any way to make plotly html load any faster – i think you would need to strip down the figure as much as possible but it's hard to make any suggestions without knowing what kind of figures you're creating and what information you're intending to convey. could you, for example, eliminate the legend for any of your figures?
    – Derek O
    Mar 19 at 6:02
  • 1
    It seems your plots are loaded with static data, in which case there is a way to make things way faster. Can you confirm this ? Mar 19 at 10:17
  • @EricLavault if by static data you mean the plot is produced and stays the same, yes. I just do a short query to a small database and produce the plot. Mar 19 at 12:14
  • 1
    Not really, the plot staying the same is one thing, but do these data you load from the database absolutely need to be fetched each time the web page loads ? Is it possible for you to load data from db once a day for example and use cached ("static" until next fetch) data for plotting ? Mar 19 at 12:22
  • 1
    Did you even try ? The code above with inline data (no db query) takes ~1.15 sec. Regarding the "render function of django", it makes no sense to "render" an html string, render() calls render_to_string() and feeds the result into an HttpResponse, you could bypass all of that and return the HttpResponse directly. Mar 20 at 10:41

2 Answers 2

1
+50

Just cache the view where the plot is rendered.

from django.views.decorators.cache import cache_page

@cache_page(60 * 15)
def my_view(request):
    ...

Carefully read Django's cache documentation. Caches are useful and powerful but they are complex and a misconfiguration can lead to hard to debug consequences.

0

You can try using Plotly express as it is high level wrapper for Plotly and to load graphs faster you can use caching or embed plotly with Javascript wrapper which will make the loading time less in general.

New contributor
Harpreet Singh is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.