import pandas as pd
import numpy as np
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import plotly

# Data to plot
# ------------------------------------------------------------------------------
candles = pd.DataFrame(np.random.randint(1,100, size = (100,4)),
                       columns = ['open', 'close', 'high', 'low'])

# App
# ------------------------------------------------------------------------------
app = dash.Dash()
serv = app.server

app.layout = \
html.Div([
    html.Div([
        html.Button('Reload', id='button')
        ]),
    html.Div([
        dcc.Graph(
            id='candles_plot',
            )
        ]),
    html.Div([
        dcc.Markdown("When Graph is updated by a callback, relayout doesn't work."),
        html.Pre(id='relayout-data'),
    ], className='three columns'),
])

# Callbacks
#-------------------------------------------------------------------------------
@app.callback(
    dash.dependencies.Output('candles_plot', 'figure'),
    [dash.dependencies.Input('button', 'n_clicks')]
    )
def update_plot(reload):
    figure = {
        'data':[
            go.Candlestick(
                x = candles.index,
                open = candles.open,
                high = candles.high,
                close = candles.close,
                low = candles.low
                )
            ],
        'layout':[
            go.Layout(
                xaxis = dict(
                    rangeslider = {'visible':False}
                    )
                )
            ]
        }
    return figure

@app.callback(
    Output('relayout-data', 'children'),
    [Input('candles_plot', 'relayoutData')])
def display_selected_data(relayoutData):
    return json.dumps(relayoutData, indent=2)

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