While running the code I am getting an error Invalid prop for this component and freezing my browser. If I remove the Graphing part, the application is working fine.
import base64
import datetime
import io
import plotly.graph_objs as go
import cufflinks as cf
import chart_studio as py
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import dash
from dash.dependencies import Input, Output, State
from dash import dcc
from dash import html
from dash import dash_table
import json
import pandas as pd
import xlrd
import openpyxl
import plotly.express as px
import plotly.io as pio
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
colors = {"graphBackground": "#F5F5F5", "background": "#ffffff", "text": "#000000"}
app.layout = html.Div(
[
dcc.Upload(
id="upload-data",
children=html.Div(["Drag and Drop or ", html.A("Select Files")]),
style={
"width": "100%",
"height": "60px",
"lineHeight": "60px",
"borderWidth": "1px",
"borderStyle": "dashed",
"borderRadius": "5px",
"textAlign": "center",
"margin": "10px",
},
# Allow multiple files to be uploaded
multiple=True,
),
# dcc.Graph(id="Mygraph"),
html.Div(id="output-data-upload"),
html.Div(id='column_dropdown'),
html.Div([dcc.Graph(id='our_graph')]),
]
)
def parse_data(contents, filename):
content_type, content_string = contents.split(",")
decoded = base64.b64decode(content_string)
try:
if "csv" in filename:
# Assume that the user uploaded a CSV or TXT file
df = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
elif "xls" in filename:
# Assume that the user uploaded an excel file
df = pd.read_excel(io.BytesIO(decoded))
elif "txt" or "tsv" in filename:
# Assume that the user upl, delimiter = r'\s+'oaded an excel file
df = pd.read_csv(io.StringIO(decoded.decode("utf-8")), delimiter=r"\s+")
except Exception as e:
print(e)
return html.Div(["There was an error processing this file."])
return df
@app.callback(
Output("output-data-upload", "children"),
[Input("upload-data", "contents"), Input("upload-data", "filename")],
)
def update_table(contents, filename):
table = html.Div()
if contents:
contents = contents[0]
filename = filename[0]
df = parse_data(contents, filename)
table = html.Div(
[
html.H5(filename),
dash_table.DataTable(
data=df.to_dict("rows"),
columns=[{"name": i, "id": i} for i in df.columns],
),
html.Hr(),
html.Div("Raw Content"),
html.Pre(
contents[0:200] + "...",
style={"whiteSpace": "pre-wrap", "wordBreak": "break-all"},
),
]
)
return table
@app.callback(
Output("column_dropdown", "children"),
[Input("upload-data", "contents"), Input("upload-data", "filename")],
)
def column_dropdown(contents, filename):
if contents:
contents = contents[0]
filename = filename[0]
df = parse_data(contents, filename)
Dropdown = html.Div([
dcc.Dropdown(
id='Dataset_and_Column',
options=[{'label': i, 'value': i} for i in df.columns],
style={'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px',
'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'display': 'inline-block'},
placeholder='Select Dataset Column'
),
html.Br(),
])
return Dropdown
@app.callback(
Output("our_graph", "figure"),
[Input("column_dropdown", "value"),Input("upload-data", "contents"), Input("upload-data", "filename")],
)
def build_graph(col,contents, filename):
if contents:
contents = contents[0]
filename = filename[0]
data = parse_data(contents, filename)
india_states = json.load(open("states_india.geojson", 'r'))
state_id_map = {}
for feature in india_states['features']:
feature['id'] = feature['properties']['state_code']
state_id_map[feature['properties']['st_nm']] = feature['id']
data['id'] = data['states'].apply(lambda x: state_id_map[x])
fig = px.choropleth(data, locations='id', geojson=india_states, color=data.columns[col_plot])
fig.update_geos(fitbounds='locations', visible=False)
return fig
if __name__ == "__main__":
app.run_server(debug=True)
