Tools of note: Using Django 3.0, plotly offline, jQuery.
(comment after solution: solved loading plotly.offline.plot() by not including the library inside the plot div.)
I am not sure if my workflow needs changing or if there is a different DOM manipulation technique, but I am seeing slow load times while adding plots into a dashboard. The generated string elements from plots are quite large and could be a factor. (MB size if I interpret the console correctly. I am new to web design.) Basically what I think happens is the jQuery runs, and then once it returns the webpage 'freezes' while it tries to add in the DOM elements.
Okay so here is the current workflow:
- Load a html page with bare essentials using a Django view. Nothing fancy and this works okay.
- Call jQuery to run another view. This view takes a while to run a calculation and do some data manipulations which is why I tried to use jQuery. The view generates between 5-10 plotly graph_objects.
- Insert the images into a carousel for viewing.
Step 3 is really the step I think needs fixing if possible. If not, is there an alternative solution?
Here is my jQuery which I hope can be improved - It is found within 'script' tags inside my .html document at the end (right before the '' tag).
var my_id = {{ my_id }}; //Django template value needed by plotly
$( document ).ready(function() {
var plots_id_tag = "data_plots";//data_plots is my .inner-carousel div element where everything will be inserted
var elmt = document.getElementById(plots_id_tag);
var endpoint = elmt.getAttribute("data-url"); //URL of view
$.ajax({
url: endpoint,
data: {
'my_id': my_id
},
success: function (data) {
var is_first = true;
var concat_divs = ''
//data is a JsonResponse value (serialized)
jQuery.each(data, function(item, val) {
if (is_first){
{#$("#" + plots_id_tag).append("<div class='item active'>" + val + "</div>");#} //Method 1 I tried was appending in loop
concat_divs += "<div class='item active'>" + val + "</div>" //Method two I tried was appending into a single long string.
is_first = false;
}
else {
{#$("#" + plots_id_tag).append("<div class='item'>" + val + "</div>");#}//Method 1
concat_divs += "<div class='item'>" + val + "</div>"//Method 2
}
})
$(elmt).append(concat_divs);//Method 2a
$(elmt).innerHTML(concat_divs);//Method 2b This one doesn't show the plots at all. I see html added to the DOM, but nothing gets shown. If this would be faster, is there an update function I need to call?
}
});
})
Here is the code generation for plotly
def get_plots(df):
#Some data manip here
layout = go.Layout(yaxis=dict(title='My plot', range=[0, y_lim], showline=True, linewidth=1, linecolor='#41b3f9', gridcolor='#e6e9ed'),
xaxis=dict(title=x_dim, showline=True, linewidth=1, linecolor='#41b3f9', gridcolor='#e6e9ed'),
title=title,
titlefont={'size': 18},
showlegend=False,
height=500,
width=1000,
plot_bgcolor='rgba(255,255,255,.3)')
fig = go.Figure(data=[lower_trace, mid_trace, upper_trace], layout=layout)
plot_conf = {'showLink': False, 'displayModeBar': False, 'responsive': True}
div = plot(fig, auto_open=False, output_type='div', config=plot_conf)
return div
Here is part of my view called by jQuery
my_plots = []
for dataframe_to_manip in list_dfs:
my_plots.append(get_plots(dataframe_to_manip)) #long process
return JsonResponse(my_plots, safe=False) #list of div elements generated by plotly
If you need anything else let me know, but I think that gives a descent idea what is going on. Goal - speed performance of the insertion of a number of plotly graph_objects for a dynamical dashboard. I imagine if I can shrink down the size of the plot images that might help. So if you have suggestions there as well, that is fine.
