0

I am trying to plot multiple graphs in dash.I obtained a code from SO.Plese see the link below

Multiple plotly plots on 1 page without subplot

When I am running the same code which is selected as answer here,I am getting an error.

NameError: name 'col_style' is not defined

Please see the code below.May I know here I went wrong

import plotly.offline as pyo
import plotly.graph_objs as go
import plotly as py

import dash
import dash_core_components as dcc
import dash_html_components as html

fig1 = go.Scatter(y=[1,2,3])
fig2 = go.Scatter(y=[3,2,1])
plots = [fig1, fig2]

app = dash.Dash()
layout = html.Div(
        [html.Div(plots[i], style=col_style[i]) for i in range(len(plots))],
        style = {'margin-right': '0px'}
    )

app.layout = layout
app.run_server()

My Code currently I using for plotting 10 Images

app = dash.Dash()
app.layout = html.Div([
    html.Div(html.H1(children="TEST SUIT1"),style={'textAlign': 'center','color': '#5742f5', 'fontSize': 20}),
   
    dcc.Graph(
        id = 'graph1',
        figure=fig),
    
    dcc.Graph(
        id = 'graph2',
        figure=fig1),
    
    dcc.Graph(
        id = 'graph3',
        figure=fig2),
    
    dcc.Graph(
        id = 'graph4',
        figure=fig3),
    
     dcc.Graph(
        id = 'graph5',
        figure=fig4),
    
    dcc.Graph(
        id = 'graph6',
        figure=fig5),
    
    dcc.Graph(
        id = 'graph7',
        figure=fig6),
    
    dcc.Graph(
        id = 'graph8',
        figure=fig7),
    
    
      dcc.Graph(
        id = 'graph9',
        figure=fig8)
])

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

Output I am getting after making the changes suggested by HLZL.I am getting an empty html file without any graph.

Dash is running on http://127.0.0.1:8050/

     * Serving Flask app "__main__" (lazy loading)
     * Environment: production
       WARNING: This is a development server. Do not use it in a production deployment.
       Use a production WSGI server instead.
     * Debug mode: off
     * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
    127.0.0.1 - - [29/Jun/2021 20:11:13] "GET / HTTP/1.1" 200 -
    127.0.0.1 - - [29/Jun/2021 20:11:13] "GET /_dash-layout HTTP/1.1" 200 -
    127.0.0.1 - - [29/Jun/2021 20:11:13] "GET /_dash-dependencies HTTP/1.1" 200
Hari
  • 333
  • 6
  • 18
  • 1
    Questions regarding a non-clear answer to another SO question should be asked in the corresponding comments and not by creating a new question. `style=col_style[i]` is an optional argument of the `html.Div()` function and can be deleted. If you want a specific style for your plots, try reading into the function definition and its argument `style`. – hlzl Jun 29 '21 at 11:32
  • If you don't mind could you please share the link which explains style and col_style.I searched in dash but failed – Hari Jun 29 '21 at 12:33

1 Answers1

1

To build upon my comment:

style=col_style[i] is an optional argument of Plotly Dash's html.Div() function which can be deleted if you don't want to change the style of your plots to something specific (which you don't have to to make this work).

I.e. simply use

layout = html.Div(
        [html.Div(plots[i]) for i in range(len(plots))],
        style = {'margin-right': '0px'}
    )

The variable col_style[i] was a Python dictionary and a custom variable of the original author not further defined. If you want to define a custom style, start reading into how the Plotly Dash HTML components work. The style argument uses CSS as a base.

hlzl
  • 479
  • 2
  • 5
  • 17
  • Thank you I run the code you gave.But no output is coming.I am not able to see any image.Blank html page is coming. – Hari Jun 29 '21 at 13:23
  • @HARITO Have you been able to create an HTML page with only one plot? What has been the last approach you've tried that has worked at least partly? – hlzl Jun 29 '21 at 13:32
  • I updated the question. I was using other method for my work I was plotting each charts using dcc then I google it and found this method in SO.But that code was showing error. – Hari Jun 29 '21 at 13:57
  • @HARITO Please update the question so I can copy and paste your code and it works. And also send me what your command line is showing you when you run the new code with my proposed changes. – hlzl Jun 29 '21 at 14:07
  • updated the questionI have added the output obtained after running the modifications suggested by you.I am gettinn an empty html file. In my code you can see that I need to plot 10 figures[fig0 to Fig9] I want to reduce the size of my code using looping – Hari Jun 29 '21 at 14:48