Python dash_core_components.Graph() Examples

def update_server_information(status):
    config = current_app.config["FRACTAL_CONFIG"]
    server = dcc.Markdown(
        f"""
**Name:** {config.fractal.name}

**Query Limit:** {config.fractal.query_limit}
            """
    )
    database = dcc.Markdown(
        f"""
**Name:** {config.database.database_name}

**Port:** {config.database.port}

**Host:** {config.database.host}
        """
    )

    queue = dcc.Graph(figure=task_graph())
    return server, database, queue 

def prepare_send():
    lCache = []
    cData = get_All_data()
    for pair in PAIRS:
        ticker = pair.ticker
        exchange = pair.exchange
        graph = 'live-graph-' + exchange + "-" + ticker
        lCache.append(html.Br())
        if (pair.Dataprepared):
            lCache.append(dcc.Graph(
                id=graph,
                figure=cData[exchange + ticker]
            ))
        else:
            lCache.append(html.Div(id=graph))
    return lCache


# links up the chart creation to the interval for an auto-refresh
# creates one callback per currency pairing; easy to replicate / add new pairs 

def display_graphs(n_clicks):
    graphs = []
    for i in range(n_clicks):
        graphs.append(dcc.Graph(
            id='graph-{}'.format(i),
            figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [3, 1, 2]
                }],
                'layout': {
                    'title': 'Graph {}'.format(i)
                }
            }
        ))
    return html.Div(graphs) 

def update_output():
    fig = dcc.Graph(
        id='example',
        figure={
            'data': [{
                'y': [1, 5, 3],
                'type': 'bar'
            }]
        }
    )
    fig2 = dcc.Graph(
        id='example-1',
        figure={
            'data': [{
                'y': [1, 5, 3],
                'type': 'bar'
            }]
        }
    )
    return [fig, fig2] 

def update_clustergram(rows):
    if len(rows) < 2:
        return "Please select at least two rows to display."

    return dcc.Graph(figure=dashbio.Clustergram(
        data=df.loc[rows].values,
        column_labels=columns,
        row_labels=rows,
        color_threshold={
            'row': 250,
            'col': 700
        },
        hidden_labels='row',
        height=800,
        width=700
    )) 

def serve_layout():
    return html.Div(
        [
            dcc.Interval(interval=5 * 1000, id="interval"),
            html.H1("Redis, Celery, and Periodic Updates"),
            html.Div(id="status"),
            dcc.Dropdown(
                id="dropdown",
                options=[{"value": i, "label": i} for i in ["LA", "NYC", "MTL"]],
                value="LA",
            ),
            dcc.Graph(id="graph"),
        ]
    ) 

def generate_liveOut_layout():
    'Generate the layout per-app, generating each tine a new uuid for the state_uid argument'
    return html.Div([
        dpd.Pipe(id="named_count_pipe",
                 value=None,
                 label="named_counts",
                 channel_name="live_button_counter"),
        html.Div(id="internal_state",
                 children="No state has been computed yet",
                 style={'display':'none'}),
        dcc.Graph(id="timeseries_plot"),
        dcc.Input(value=str(uuid.uuid4()),
                  id="state_uid",
                  style={'display':'none'},
                 )
        ]) 

def __init__(self, parent_name, local_name):
        Component.__init__(self, parent_name, local_name)

        self._register(
            dcc.Graph(id=self.full_name,
                      figure={
                          'data': [],
                          'layout': make_layout(None, None, None, None)
                      })) 

def callback_test(*args, **kwargs): #pylint: disable=unused-argument
    'Callback to generate test data on each change of the dropdown'

    # Creating a random Graph from a Plotly example:
    N = 500
    random_x = np.linspace(0, 1, N)
    random_y = np.random.randn(N)

    # Create a trace
    trace = go.Scatter(x=random_x,
                       y=random_y)

    data = [trace]

    layout = dict(title='',
                  yaxis=dict(zeroline=False, title='Total Expense (£)',),
                  xaxis=dict(zeroline=False, title='Date', tickangle=0),
                  margin=dict(t=20, b=50, l=50, r=40),
                  height=350,
                 )


    fig = dict(data=data, layout=layout)
    line_graph = dcc.Graph(id='line-area-graph2', figure=fig, style={'display':'inline-block', 'width':'100%',
                                                                     'height':'100%;'})
    children = [line_graph]

    return children 

def fig2():
    ''' '''
    return dcc.Graph(
        id='main-graph',
        figure={
            'data': [{
                'name': 'Some name',
                'mode': 'line',
                'line': {
                    'color': 'rgb(0, 0, 0)',
                    'opacity': 1
                },
                'type': 'scatter',
                'x': [randint(1, 100) for x in range(20)],
                'y': [randint(1, 100) for x in range(20)]
            }],
            'layout': {
                'autosize': True,
                'scene': {
                    'bgcolor': 'rgb(255, 255, 255)',
                    'xaxis': {
                        'titlefont': {'color': 'rgb(0, 0, 0)'},
                        'title': 'X-AXIS',
                        'color': 'rgb(0, 0, 0)'
                    },
                    'yaxis': {
                        'titlefont': {'color': 'rgb(0, 0, 0)'},
                        'title': 'Y-AXIS',
                        'color': 'rgb(0, 0, 0)'
                    }
                }
            }
        }
    ) 

def fig1():
    ''' '''
    return dcc.Graph(
        id='main-graph',
        figure={
            'data': [{
                'name': 'Some name',
                'mode': 'line',
                'line': {
                    'color': 'rgb(0, 0, 0)',
                    'opacity': 1
                },
                'type': 'scatter',
                'x': [randint(1, 100) for x in range(20)],
                'y': [randint(1, 100) for x in range(20)]
            }],
            'layout': {
                'autosize': True,
                'scene': {
                    'bgcolor': 'rgb(255, 255, 255)',
                    'xaxis': {
                        'titlefont': {'color': 'rgb(0, 0, 0)'},
                        'title': 'X-AXIS',
                        'color': 'rgb(0, 0, 0)'
                    },
                    'yaxis': {
                        'titlefont': {'color': 'rgb(0, 0, 0)'},
                        'title': 'Y-AXIS',
                        'color': 'rgb(0, 0, 0)'
                    }
                }
            }
        }
    ) 

def render_content(tab):
    if tab == 'tab-1-example-graph':
        return html.Div([
            html.H3('Tab content 1'),
            dcc.Graph(
                id='graph-1-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [3, 1, 2],
                        'type': 'bar'
                    }]
                }
            )
        ])
    elif tab == 'tab-2-example-graph':
        return html.Div([
            html.H3('Tab content 2'),
            dcc.Graph(
                id='graph-2-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [5, 10, 6],
                        'type': 'bar'
                    }]
                }
            )
        ]) 

def filter(selected_values):
    figure = create_figure(
        list(df_jobs[
            df_jobs.nytlabel.isin(selected_values)
        ].cescode) if selected_values else None,
        skip_labels=['-'],
    )

    for trace in figure['data']:
        trace['hoverinfo'] = 'text'

    return dcc.Graph(
        id='filtered-graph',
        figure=figure
    ) 

def update_graph(rows):
    dff = pd.DataFrame(rows)
    return html.Div(
        [
            dcc.Graph(
                id=column,
                figure={
                    "data": [
                        {
                            "x": dff["country"],
                            "y": dff[column] if column in dff else [],
                            "type": "bar",
                            "marker": {"color": "#0074D9"},
                        }
                    ],
                    "layout": {
                        "xaxis": {"automargin": True},
                        "yaxis": {"automargin": True},
                        "height": 250,
                        "margin": {"t": 10, "l": 10, "r": 10},
                    },
                },
            )
            for column in ["pop", "lifeExp", "gdpPercap"]
        ]
    ) 

def updateWorldGraph(app, WORLD):
    environmentData = [
        {
        }
    ]
    populationGroupData = [
        {
            'x': [locale.position[0]],
            'y': [locale.position[1]],
            'type': 'scatter',
            'name': locale.name,
            'showscale': False,
            'mode': 'markers',
            'marker': {
                'symbol': 'square'
            }

        } for locale in WORLD.locales
    ]

    fig = {
        'data': populationGroupData,
        'layout': {
            'title': "World Topology: 2D MAP"
        }
    }


    G = dcc.Graph(id="WorldGraph", figure=fig)
    #app.layout.get("WorldGraphContainer").children = [G]
    app.WorldGraph = G
    return G 

def updateEvalbreakGraph(app, EvaluationSummary):

    K = ["evaluation", "secondary"]
    GES = dict([(k, []) for k in K])
    for E in EvaluationSummary:
        for k in K:
            if k in E.keys():
                GES[k].append(E[k])
            else:
                GES[k].append(None)

    DATA = [
        {
            'x': list(range(len(GES[KEY]))),
            'y': GES[KEY],
            'type': 'line',
            'name': KEY.upper()
        } for KEY in GES.keys()
    ]

    figure = {
        'data': DATA,
        'layout': {
            'title': "Evaluation Breaks"
        }
    }

    G = dcc.Graph(figure=figure, id="EvaluationBreaksGraph")
    app.EvalBreakGraph = G
    return G 

def nested_component_layout(
        component
):
    return [
        dcc.Input(id='prop-name'),
        dcc.Input(id='prop-value'),
        html.Div(id='pass-fail-div'),
        html.Button('Submit', id='submit-prop-button'),
        dcc.Graph(
            id='test-graph',
            figure=component
        )
    ] 

def add_graph(self, graph_id, col, row, width, height, menu=None,
                  menu_height=50):
        graph_height = "calc(100% - {:d}px)".format(menu_height) \
                       if menu else "100%"
        graph = dcc.Graph(
            id=graph_id,
            style={
                "width": "100%",
                "height": graph_height
            },
            config=dict(
                autosizable=True
            )
        )
        if menu:
            graph = html.Div([
                html.Div(menu, style={"height": menu_height}),
                graph
            ], style={"height": "100%"})

        self.add_element(
            element=graph,
            col=col,
            row=row,
            width=width,
            height=height
        ) 

def scatter_graph(trace_info, x_varname, y_varname):
    return dcc.Graph(
        id='bivariate-scatter',
        figure=scatter_figure(trace_info, x_varname, y_varname)
    ) 

def lines_graph(trace_info, varname):
    return dcc.Graph(
        id='univariate-lines',
        figure=lines_figure(trace_info, varname)
    ) 

def InteractiveImage(id, image_path):
    encoded_image = base64.b64encode(open(image_path, 'rb').read())
    return dcc.Graph(
        id=id,
        figure={
            'data': [],
            'layout': {
                'xaxis': {
                    'range': RANGE
                },
                'yaxis': {
                    'range': RANGE,
                    'scaleanchor': 'x',
                    'scaleratio': 1
                },
                'height': 600,
                'images': [{
                    'xref': 'x',
                    'yref': 'y',
                    'x': RANGE[0],
                    'y': RANGE[1],
                    'sizex': RANGE[1] - RANGE[0],
                    'sizey': RANGE[1] - RANGE[0],
                    'sizing': 'stretch',
                    'layer': 'below',
                    'source': 'data:image/png;base64,{}'.format(encoded_image)
                }],
                'dragmode': 'select'  # or 'lasso'
            }
        }
    ) 

def get_account_stats_figure(account_stats_reader: AccountStatsReader):
    graph_list = []

    # 账户统计曲线
    if account_stats_reader:
        fig = account_stats_reader.draw_line(show=False)

        for trader_name in account_stats_reader.trader_names:
            graph_list.append(dcc.Graph(
                id='{}-account'.format(trader_name),
                figure=fig))

    return graph_list 

def update_target_signals(entity_id, start_date, end_date, trader_index):
    if entity_id and (trader_index is not None):
        return dcc.Graph(
            id=f'{entity_id}-signals',
            figure=get_trading_signals_figure(order_reader=order_readers[trader_index], entity_id=entity_id,
                                              start_timestamp=start_date, end_timestamp=end_date))
    raise dash.exceptions.PreventUpdate() 

def update_graph(dropdown_value):
    return {
        'layout': {
            'title': 'Graph of {}'.format(dropdown_value),
            'margin': {
                'l': 20,
                'b': 20,
                'r': 10,
                't': 60
            }
        },
        'data': [{'x': [1, 2, 3], 'y': [4, 1, 2]}]
    } 

def updateContent(hoverData1, hoverData2):
    print(hoverData1)
    print(hoverData2)
    if hoverData1 is not None:
        return html.Div([
            html.Div('Graph 1'),
            html.Pre(hoverData1)
        ])
    if hoverData2 is not None:
        return html.Div([
            html.Div('Graph 2'),
            html.Pre(hoverData1)
        ]) 

def display_content(selected_tab):
    return html.Div([
          html.H1(selected_tab),
          dcc.Graph(id='graph', figure=generate_figure(selected_tab))
    ]) 

def update_graph(dropdown_value):
    return {
        'layout': {
            'title': 'Graph of {}'.format(dropdown_value),
            'margin': {
                'l': 20,
                'b': 20,
                'r': 10,
                't': 60
            }
        },
        'data': [{'x': [1, 2, 3], 'y': [4, 1, 2]}]
    } 

def hist_graph(trace_info, varname):
    return dcc.Graph(
        id='univariate-hist',
        figure=hist_figure(trace_info, varname)
    ) 

def update_graph(hoverData):
    if not hoverData:
        x_value=x_data[250]
        opacity = 0
    else:
        x_value = hoverData['points'][0]['x']
        opacity = 0.8
    data = [go.Scatter(
                x=x_data,
                y=y_data,
                line={'color': '#235ebc'},
                opacity=0.8,
                name="Graph"
            ),
            go.Scatter(
                x=[x_value, x_value],
                y=[0, height],
                line={'color': '#a39999'},
                opacity=opacity,
                name='Moving Line')
            ]
    layout = go.Layout(
                xaxis={'type': 'linear', 'title': "Timestep"},
                yaxis={'type': 'linear', 'title': "Value"},
                margin={'l': 60, 'b': 40, 'r': 10, 't': 10},
                hovermode="False"
                )
    
    return {'data': data, 'layout': layout} 

def display_content(value):
    if value == 1:
        return html.Div([dcc.Graph(id='graph')]) #etc. etc.
    elif value == 2:
        return html.Div([dt.DataTable(id='table')]) #etc. etc.