skip to Main Content

enter image description hereim trying to adjust the height of the dash container ( white ) but icant seems to figure how to do it , this code and i would appreciate any help :

analytics.html :

{% extends 'frontend/base.html' %}
{% load plotly_dash %}

{% block content %}
    <h2>Reports and Analytics</h2>
    <div id="dash-container" style="width: 100%; height: 1200px; overflow: hidden;">  <!-- Adjust container height here -->
        {% plotly_app name="Analytics" %}
    </div>
{% endblock %}

analytics_dash.py :

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from django_plotly_dash import DjangoDash
from .models import UserAction
from django.db.models import Count

# Create a Django Dash application
app = DjangoDash('Analytics')

def load_data():
    actions = UserAction.objects.values('action_type').annotate(count=Count('id'))
    return [action['action_type'] for action in actions], [action['count'] for action in actions]

# Define the layout of the Dash app
app.layout = html.Div([
    dcc.Graph(
        id='user-action-graph',
        style={'width': '100%', 'height': '100%'}  # Use 100% to fill container
    )
], style={'width': '100%', 'height': '1200px'})  # Adjust to match container size

@app.callback(
    Output('user-action-graph', 'figure'),
    [Input('user-action-graph', 'id')]
)
def update_graph(_):
    action_types, counts = load_data()

    fig = go.Figure()

    if not action_types or not counts:
        fig.add_annotation(text="No Activity Data Available Yet", showarrow=False)
    else:
        fig.add_trace(go.Bar(
            x=action_types, 
            y=counts, 
            marker=dict(color='royalblue', line=dict(color='black', width=1))
        ))

    max_count = max(counts) if counts else 5

    fig.update_layout(
        title='User Activities',
        xaxis_title='Action Type',
        yaxis_title='Count',
        yaxis=dict(range=[0, max_count + 2]),
        margin=dict(l=40, r=40, b=40, t=40),
        height=1000,  # Match height with container
    )

    return fig`

i tried to adjust the dcc graph my self , testes using min-height and max-height but nothing appeared to fix the issue and ican only manage to make the graph inside the container bigger

2

Answers


  1. Chosen as BEST ANSWER

    the only solution i found was this so far :

    {% extends 'frontend/base.html' %}
    
    {% block content %}
    <h2>Reports and Analytics</h2>
    <iframe src="http://127.0.0.1:8000/django_plotly_dash/app/Analytics/" 
            style="width: 100%; height: 90vh; border: none;"></iframe>
    {% endblock %}
    ````[enter image description here][1]
    
    
      [1]: https://i.sstatic.net/Knexh9sG.png
    

  2. I believe this is not Python relevant, but CSS. You should search for CSS styling, such as width, min-width, height etc. Also how they behave for different values such as 100% or 100vw. Well, I have one for you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search