How do I show several charts charts in Dash + Python using a for loop?

Question

I'm trying to print charts using a loop. The data is in a list. This is how my code looks currently (I get a Syntax Error at the for loop):

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

dfs = [pd.DataFrame({"xaxis":["thing","otherthing","anotherthing"],"yaxis":[64,14,62]}),pd.DataFrame({"xaxis":["newthing","newotherthing","newanotherthing"],"yaxis":[344,554,112]})]
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

g = 0

app.layout = html.Div(children=[
    for df in dfs:
        dcc.Graph(id='example-graph'+str(g),figure={'data': [go.Bar(x=df['xaxis'],y=df[("yaxis")],name="yaxis")]})
    ]
    g = g + 1)

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

I want it to look something like this:

How would I go about doing this?

Thanks in advance.

EDIT 08/03/19: I'm aware that I can manually code in both charts like below, but I'm looking to put it in a loop because in the future I could potentially be displaying more than 2 charts on one page.

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

df1 = pd.DataFrame({"xaxis":["thing","otherthing","anotherthing"],"yaxis":[64,14,62]})
df2 = pd.DataFrame({"xaxis":["newthing","newotherthing","newanotherthing"],"yaxis":[344,554,112]})
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

g = 0
j = 1

app.layout = html.Div(children=[

    dcc.Graph(id='example-graph'+str(g),figure={'data': [go.Bar(x=df1['xaxis'],y=df1[("yaxis")],name="yaxis")]}),
    dcc.Graph(id='example-graph' + str(j), figure={'data': [go.Bar(x=df2['xaxis'], y=df2[("yaxis")], name="yaxis")]})
])

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

2ND EDIT 08/03/19: My final working code:

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

dfs = [pd.DataFrame({"xaxis":["thing","otherthing","anotherthing"],"yaxis":[64,14,62]}),pd.DataFrame({"xaxis":["newthing","newotherthing","newanotherthing"],"yaxis":[344,554,112]})]
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

i = 0
output = []
#here you can define your logic on how many times you want to loop
for df in dfs:
     output.append(dcc.Graph(id='example-graph'+str(i),figure={'data': [go.Bar(x=df['xaxis'],y=df[("yaxis")],name="yaxis")]}))
     i = i + 1


app.layout = html.Div(children=output)

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

Answer 1

The children attribute is basically a list, you can generate the list first in a generic loop and then add it in the Div.

Here is the working snippet,

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

df1 = pd.DataFrame({"xaxis":["thing","otherthing","anotherthing"],"yaxis":[64,14,62]})
df2 = pd.DataFrame({"xaxis":["newthing","newotherthing","newanotherthing"],"yaxis":[344,554,112]})
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


output = []
#here you can define your logic on how many times you want to loop
for i in range(0,2): 
     output.append(dcc.Graph(id='example-graph'+str(i),figure={'data': [go.Bar(x=df1['xaxis'],y=df1[("yaxis")],name="yaxis")]}))


app.layout = html.Div(children=output)

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