Graph with callback being plotted only when reloading the page

Dash Python
1

I have a graph with a callback which when the user first open the page, it does not show the graph, only the callback values, then to show the graph itself it is needed to hit F5 or refresh the page.

How can I achieve to plot the graph at first page load with no need to reload?
I took a really serious read at this but couldn’t help

What I’m doing is something like:

import dash_html_components as html
import dash_core_components as dcc
from app import app

import dash
import pandas as pd

from utils import *


def radar_me(clusters):
    # long code which defines graph
	return polar_json

@app.callback(dash.dependencies.Output('metric_me', 'children'),
              [dash.dependencies.Input('select_clusters', 'value')])

def metric_me(value):

    return (
        html.Div([
            html.Div([
                dcc.Graph(id='radar_purpose',figure=radar_me(value))],
            className='nine columns')]))

graph = html.Div(id='metric_me')

sheet_template = (

    html.Div([
            html.Div([
                html.Div([
                    dcc.RadioItems(
                        id='select_clusters',
                        options=[
                        {'label': 'Score ', 'value': 'score_factor'},
                        {'label': 'Occupation ', 'value': 'cluster_ocupacao'},
                        {'label': 'Lending Reason ', 'value': 'cluster_purpose'},
                        {'label': 'Installments ', 'value': 'cluster_installments'}],
                        value='cluster_ocupacao',
                        labelStyle={'display': 'inline-block', 'margin-right':'20px'})],
                className='ten columns'),
                graph #plot graph
)

Thanks in advance.

2

I can see the graph when first open the page, running code that’s similar:

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go

app = dash.Dash(__name__)
app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.RadioItems(
                id='select_clusters',
                options=[
                {'label': 'Score ', 'value': 'score_factor'},
                {'label': 'Occupation ', 'value': 'cluster_ocupacao'},
                {'label': 'Lending Reason ', 'value': 'cluster_purpose'},
                {'label': 'Installments ', 'value': 'cluster_installments'}],
                value='cluster_ocupacao',
                labelStyle={'display': 'inline-block', 'margin-right':'20px'})],
            className='ten columns'),
        html.Div(id='metric_me')
    ])
])

@app.callback(dash.dependencies.Output('metric_me', 'children'),
              [dash.dependencies.Input('select_clusters', 'value')])

def metric_me(value):

    return html.Div([
            html.Div([
                dcc.Graph(id='radar_purpose',
                          figure={'data':
                              [go.Bar(
                                  x=['Occupation', 'Lending Reason', 'Installments'],
                                  y=[20, 14, 23])]
                          }
                          )],
            className='nine columns')])

if __name__ == '__main__':
    app.run_server(debug=True)