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


df = pd.read_csv('/Users/manishrai/PycharmProjects/Plots/auto-mpg.csv')

app = dash.Dash()

features = df.columns

app.layout = html.Div([
                html.Div([
                    dcc.Dropdown(id = 'xaxis',
                                 options= [{'label': i,'value':i } for i in features],
                                 value= 'displacement')
                 ],style={'width':'48%','display':'inline-block'}),
                html.Div([
                    dcc.Dropdown(id = 'yaxis',
                                 options= [{'label': i,'value':i } for i in features],
                                 value= 'mpg')
                ],style={'width':'48%','display':'inline-block'}),
                dcc.Graph(id = 'feature_graphic')
],style={'padding':10})

@app.callback(Output('feature-graphic','figure'),
              [Input('xaxis','value'),Input('yaxis','value')])

def update_graph(xaxis_name,yaxis_name):
    return {'data':[go.Scatter(x=df[xaxis_name],y=df[yaxis_name],
                               text=df['name'],
                               mode='markers',
                               marker={'size':15})]
    ,'layout':go.Layout(title='My dashboard for MPG',
            xaxis = {'title':xaxis_name},
                        yaxis = {'title': xaxis_name}),}

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

