Rendering Plotly graph onto Django application using data from SQL

Question

I'm trying to integrate a Plotly scatter graph into my Django application following the instructions laid out here: Embedding a Plotly chart in a Django template.

The data I want to render on the Plotly graph is from the application's SQL database but I can't figure out how to query the data without dropping values from the dataset.

Below is the views.py file:

release_dates = list(models.Film.objects.values_list('release_date', flat=True).distinct())
gross = list(models.Film.objects.values_list('gross', flat=True).distinct())
title = list(models.Film.objects.values_list('title', flat=True).distinct())

class Graph(TemplateView):
    template_name = 'graph.html'
    
    def get_context_data(self, **kwargs):
        context = super(Graph, self).get_context_data(**kwargs)

        trace1 = go.Scatter(x=release_dates, y=gross, marker={'color': 'red'}, hovertext = title,
                            mode="markers+text",  name='1st Trace')
        data=go.Data([trace1])
        layout=go.Layout(title="Films by Gross", xaxis= {'title':'Year'}, yaxis={'title':'Gross'})
        figure=go.Figure(data=data,layout=layout)
        div = opy.plot(figure, auto_open=False, output_type='div')

        context['graph'] = div

        return context

The problem is that when the Plotly Graph is rendered on the webpage, the data comes out jumbled so that the films' titles don't match their release dates and their gross.

I think the problem is that there are missing or "null" values in the database so when I call the list function on the "release_date", "gross" and "title" values_list, the data become misaligned. (I have checked the models on the backend of the site and the data is fine - the problem arises when the data is queried).

Is there a better way of rendering this data than using the list function like I have done above or a better way of approaching this problem all together.

Thanks!

score 1 · Answer 1 · answered Jul 14 '20 at 13:59

I figured this out by querying the database using the Model.object.values_list function with three inputs - which returned my desired x and y coordinates and hovertext values in a list, which I could then loop through:

import plotly.offline as opy
import plotly.graph_objs as go
from home.models import Film

model_data = Film.objects.values_list('release_date', 'gross','title')
x_value_list = []
y_value_list = []
z_value_list = []
for values in model_data:
    x_value_list.append(values[0])
    y_value_list.append(values[1])
    z_value_list.append(values[2])

class Graph(TemplateView):
    template_name = 'graph.html'

    def get_context_data(self, **kwargs):
        context = super(Graph, self).get_context_data(**kwargs)

        trace1 = go.Scatter(x=x_value_list, y=y_value_list, marker={'color': 'red'}, hovertext = z_value_list,
                            mode="markers+text", name='1st Trace')
        data=go.Data([trace1])
        layout=go.Layout(title="Films by Gross", xaxis= {'title':'Year'}, yaxis={'title':'Gross'})
        figure=go.Figure(data=data,layout=layout)
        div = opy.plot(figure, auto_open=False, output_type='div')

        context['graph'] = div

        return context

score 1 · Answer 2 · answered Nov 19 '20 at 15:13

Maybe to late, but if someone sees this an easier way is using pandas (or not even that)

import pandas a pd
df = pd.DataFrame(Film.objects.values('release_date', 'gross','title'))
...
def get_context_data(self, **kwargs):
        context = super(Graph, self).get_context_data(**kwargs)

        trace1 = go.Scatter(
                     x=df.realese_date, 
                     y=df.gross, marker={'color': 'red'}, 
                     hovertext=df.title,
                     mode="markers+text", name='1st Trace')

        ...

Rendering Plotly graph onto Django application using data from SQL

2 Answers2