Multiple Bar charts in web application

[ryanicky]

I am attempting to setup a flask website that will contain four bar plots with data stored in a database. I have the data and everything all set except the plots are empty?

I am hard coding the 4 plots for now and once they are working I will convert to a more dynamics approach .

code

x1=data1.loc[data1['a'] == 1]
    x2=data1.loc[data1['a'] == 2]
    x3=data1.loc[data1['a'] == 3]
    x4=data1.loc[data1['a'] == 4]
    
    #for Cohort, X in data1.groupby('a'):
    trace1 = go.Bar(
        x=np.array(x1[['b']]),
        y=np.array(x1[['c']])
    )

    trace2 = go.Bar(
        x=np.array(x2[['b']]),
        y=np.array(x2[['c']]),
        xaxis='x2',
        yaxis='y2'
    )

    trace3 = go.Bar(
        x=np.array(x3[['b']]),
        y=np.array(x3[['c']]),
        xaxis='x3',
        yaxis='y3'
    )

    trace4 = go.Bar(
        x=np.array(x4[['b']]),
        y=np.array(x4[['c']]),
        xaxis='x4',
        yaxis='y4'
    )

    data = [trace1, trace2, trace3, trace4]

    layout = go.Layout(
        xaxis=dict(
            domain=[0, 0.24]
        ),
        yaxis=dict(
            title="Count"
        ),
        xaxis2=dict(
            domain=[0.26, 0.5],
            anchor='y2'
        ),
        yaxis2=dict(
            anchor='x2'
        ),
        xaxis3=dict(
            domain=[0.51, 0.75],
            anchor='y3'
        ),
        yaxis3=dict(
            anchor='x3'
        ),
        xaxis4=dict(
            domain=[0.76, 1],
            anchor='y4'
        ),
        yaxis4=dict(
            anchor='x4'
        ))

    plotly_plot_json_datab = json.dumps(data, cls=plotly.u  tils.PlotlyJSONEncoder)
    plotly_plot_json_layoutb = json.dumps(layout, cls=plotly.utils.PlotlyJSONEncoder)
    return plotly_plot_json_datab, plotly_plot_json_layoutb

This is what the json looks like

{"x": [[6.0], [7.0], [8.0], [9.0]], "y": [[1.0], [1117.0], [171.0], [7.0]], "type": "bar"}, {"x": [[6.0], [7.0], [8.0]], "type": "bar", "y": [[1.0], [72.0], [27.0]], "xaxis": "x2", "yaxis": "y2"}, {"x": [[7.0], [8.0]], "type": "bar", "y": [[87.0], [13.0]], "xaxis": "x3", "yaxis": "y3"}, {"x": [[7.0], [8.0], [9.0]], "type": "bar", "y": [[85.0], [14.0], [1.0]], "xaxis": "x4", "yaxis": "y4"}]
{"yaxis": {"title": "Count"}, "yaxis2": {"anchor": "x2"}, "yaxis4": {"anchor": "x4"}, "xaxis3": {"domain": [0.51, 0.75], "anchor": "y3"}, "xaxis2": {"domain": [0.26, 0.5], "anchor": "y2"}, "yaxis3": {"anchor": "x3"}, "xaxis": {"domain": [0, 0.24]}, "xaxis4": {"domain": [0.76, 1], "anchor": "y4"}}

Here is a screen shot of the result.