Size of Graphs in DJango

Dash Python
1

Hey, hope everyone is doing fine, I am stuch at this problem and thought I should post here.

This is the code which I am working on

import pandas as pd
from dash import dcc, html
from django.shortcuts import render
from django_plotly_dash import DjangoDash
from dash.dependencies import Input, Output
from datetime import datetime, timedelta
from workflow.models import Workflow
from asgiref.sync import sync_to_async
import plotly.express as px

app = DjangoDash(name=“WorkflowDashboard”)

Function to filter workflows based on type and date range

@sync_to_async
def filter_workflows_async(workflow_type, start_date, end_date):
workflows = Workflow.objects.all()

if workflow_type:
    workflows = workflows.filter(type=workflow_type)

if start_date and end_date:
    workflows = workflows.filter(datetime_started__range=[start_date, end_date])

# Convert QuerySet to DataFrame
workflows_df = pd.DataFrame.from_records(workflows.values("datetime_started"))

return workflows_df

Initial data for the graph

initial_data = filter_workflows_async(None, None, None)

app.layout = html.Div(
[
html.H4(‘Live adjustable graph-size’),
html.P(“Change figure width:”),
dcc.Dropdown(
id=“workflow-type-dropdown”,
options=[
{“label”: choice, “value”: choice}
for choice in Workflow._meta.get_field(“type”).choices
],
value=None,
multi=False,
placeholder=“Filter by Workflow Type”,
),
dcc.DatePickerRange(
id=“date-range-picker”,
start_date=datetime.now() - timedelta(days=30),
end_date=datetime.now(),
display_format=“YYYY-MM-DD”,
end_date_placeholder_text=“Select End Date”,
start_date_placeholder_text=“Select Start Date”,
),
dcc.Graph(
id=“workflow-count-graph”,
config={‘responsive’: True},
style={‘width’: ‘1000px’, ‘height’: ‘500px’}, # Set width and height here
),
]
)

@sync_to_async
def update_graph_async(selected_workflow_type, start_date, end_date, graph_width):
filtered_workflows = filter_workflows_async(selected_workflow_type, start_date, end_date)

# Group by date and calculate the count
workflow_counts = (
    filtered_workflows.groupby(filtered_workflows.datetime_started.dt.date)
    .size()
    .reset_index(name="count")
)

figure = {
    "data": [
        {
            "x": workflow_counts["datetime_started"],
            "y": workflow_counts["count"],
            "type": "bar",
            "name": "Workflow Count",
        }
    ],
    "layout": {
        "title": "Workflow Counts",
        "width": 500,
        "xaxis": {"title": "Date"},
        "yaxis": {"title": "Count"},
        "barmode": "group",
    },
}

return figure

Callback to update the graph based on user inputs

@app.callback(
Output(“workflow-count-graph”, “figure”),
[
Input(“workflow-type-dropdown”, “value”),
Input(“date-range-picker”, “start_date”),
Input(“date-range-picker”, “end_date”),
],
)
async def update_graph_callback(selected_workflow_type, start_date, end_date):
figure = await update_graph_async(selected_workflow_type, start_date, end_date)
return figure

Django view

def dashboard(request):
figure = update_graph_async(None, None, None)
return render(request, “dashboard/dashboard.html”, {“figure”: figure})

My current output is like this, no matter where I add styles or height/width in layout, my graph is still conjusted and hard to view, can someone please please guide me how to fix this?

image
image1121×495 3.7 KB

2

You haven’t shown it, but your problem probably stems from your use of one of the template tags provided by django-plotly-dash - you will find the relevant documentation here

For future reference, the How to Get your Questions Answered on the Plotly Forum question pinned to the top of the community forum gives very clear instructions on how to format posts - you should read that and follow it when posting code or similar snippets that need formatting.