How to embed a graph into my html with Dash?

Dash Python
1

I wonder how to embed my graph into my html code without having to write the whole code of the file 1 into the file 2.

For example I have this graph in the file 1 :

import plotly.graph_objects as go

x=['b', 'a', 'c', 'd']
fig = go.Figure(go.Bar(x=x, y=[2,5,1,9], name='Montreal'))
fig.add_trace(go.Bar(x=x, y=[1, 4, 9, 16], name='Ottawa'))
fig.add_trace(go.Bar(x=x, y=[6, 8, 4.5, 8], name='Toronto'))

fig.update_layout(barmode='stack', xaxis={'categoryorder':'category ascending'})
fig.show()

And I want to embed it into my html which is in my file 2 :

from dash import Dash, html

html.Div(className='graphtest', children={

#How do I put my graph here ?

}),

How should I do to put my graph into my html (file 2) without having to put the whole code of the file 1 into it ? Thank you.

2

You could make a function out of file 1 and call it from file 2:

file1.py

import ...

def create_graph():
  fig = go.Figure(...)
  return fig

file2.py

from file1 import create_graph
from dash import Dash, html


layout = html.Div(
  className="graphtest",
  children=[
    dcc.Graph(figure=create_graph())
  ]
)
4

Thank you for the reply !

It works, however not exactly as I would want.

I am using flexboxes, so I have many containers for which I would want to put a graph into, so I can display multiple graphs at once. But when I do what you recommended, it opens the graph on the entire page and not inside the container… There’s probably a small thing to do but I can’t find…

So for example I have :

#Main screen
html.Div(className='leftboard', style={"border":"1px black solid", 'width':'100%','height':'100%'}, children=[

    #First section
    html.Div(className='section_one', style={"border":"1px black solid", 'width':'100%','height':'50%'}, children=[

        #First graph
        html.Div(className='graph_one', style={"display":"flex"}, children={

            dcc.Graph(figure=create_graph())

        }),
    ]),

And instead of having the graph opened inside the graph_one container (a small portion of the screen), it opens a new page and takes the whole screen. There’s probably a small thing to do but I can’t find what…

5

Try passing into the dcc.Graph a width 100% and height 100%

dcc.Graph(
    figure=figure,
    style={'width':'100%','height':'100%'}
)
6

Still the same : the graph is generated on the entire page :confused:

7

Can you post the full code of your app so we can try to reproduce it on our own machine?

8

Here is the code of the two files, thank you for the help !

I would like to put the graph under the “# Graph one” section

Here is the HTML/CSS file :

from dash import Dash, html, dcc, dash_table

import plotly.graph_objects as go

from Models.Graphiquesfrontend import graphone

app = Dash(__name__)

#Dashboard
app.layout = html.Div(className='dashboard',style={"display":"flex","border":"1px black solid", 'width':'1850px','height':'920px'}, children=[

  #---- Three left boards ----
  html.Div(className='leftboard', style={"border":"1px black solid", 'width':'100%','height':'100%'}, children=[

      # Board1 space
      html.Div(className='board_one', style={"border":"1px black solid", 'width':'100%','height':'50%'}, children=[
          html.H1("Board1"),

          # Graph one
          html.Div(className='graph_one', style={"display":"flex"}, children={
               
             dcc.Graph(figure=graphone())

          }),
      ]),

      #Bottom left part
      html.Div(className='board_two', style={'display':'flex',"border":"1px black solid", 'width':'100%','height':'50%'}, children=[

          #Board 2 space
          html.Div(className='graph_two_left',style={"border":"1px black solid", 'width':'50%','height':'100%'}, children=[
              html.H1("Board2"),

          ]),

          #Board 3 space
          html.Div(className='graph_two_right',style={"border":"1px black solid", 'width':'50%','height':'100%'}, children=[
              html.H1("Board3"),

          ])
      ])
  ]),

  #---- Right board (ignore) ---
  html.Div(className='rightboard', style={'width':'100%','height':'100%',"border":"1px black solid"},children=[
      html.H1("Board4")



   ])
])


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

Here is the graph file:

import plotly.graph_objects as go

def graphone():

  x = ['b', 'a', 'c', 'd']
  fig = go.Figure(go.Bar(x=x, y=[2, 5, 1, 9], name='Montreal'))
  fig.add_trace(go.Bar(x=x, y=[1, 4, 9, 16], name='Ottawa'))
  fig.add_trace(go.Bar(x=x, y=[6, 8, 4.5, 8], name='Toronto'))

  fig.update_layout(barmode='stack', xaxis={'categoryorder': 'category ascending'})
  fig.show()

  return fig