# Update Static Image Problem

**URL:** <https://community.plotly.com/t/update-static-image-problem/8544>\
**Category:** Dash Python\
**Created:** [February 23, 2018, 6:44am UTC](https://community.plotly.com/t/update-static-image-problem/8544 "2018-02-23T06:44:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![reinaldogani](https://avatars.discourse-cdn.com/v4/letter/r/c77e96/32.png) [@reinaldogani](https://community.plotly.com/u/reinaldogani)\
**Post date:** [February 23, 2018, 6:44am UTC](https://community.plotly.com/t/update-static-image-problem/8544/1 "2018-02-23T06:44:20Z")

</div>

The use case is when I click a point in a mapbox, a callback will be triggered which will generate a png file and also update the static image with the png file

Problem is it can’t seem to update the static image with the newly generated png file

Here is the code that I have write

checkin = pd.read\_csv(’/Users/reinaldogani/Desktop/vegas\_checkin.csv’)  
checkin.drop(‘Unnamed: 0’, axis=1)

vegas\_tip = pd.read\_csv(’/Users/reinaldogani/Desktop/vegas\_tip.csv’)  
vegas\_tip.drop(‘Unnamed: 0’, axis=1)  
vegas\_tip[‘name’]=vegas\_tip[‘name’].str.replace(’"’, “”)

business\_name=‘subway’  
image\_filename = ‘/Users/reinaldogani/Desktop/’+business\_name+’.png’ # replace with your own image  
encoded\_image = base64.b64encode(open(image\_filename, ‘rb’).read())  
img\_source = ‘data:image/png;base64,{}’.format(encoded\_image.decode())

app.layout = html.Div(  
[  
html.Div([  
html.Div(  
[  
html.P(id=‘total-rides’, className=“totalRides”),  
html.P(id=‘total-rides-selection’, className=“totalRideSelection”),  
html.P(id=‘date-value’, className=“dateValue”),  
html.Div(  
[  
dcc.Dropdown(  
id=‘my-dropdown’,  
options=[  
{‘label’: ‘Monday’, ‘value’: ‘1’},  
{‘label’: ‘Tuesday’, ‘value’: ‘2’},  
{‘label’: ‘Wednesday’, ‘value’: ‘3’},  
{‘label’: ‘Thursday’, ‘value’: ‘4’},  
{‘label’: ‘Friday’, ‘value’: ‘5’},  
{‘label’: ‘Satuday’, ‘value’: ‘6’},  
{‘label’: ‘Sunday’, ‘value’: ‘0’}  
],  
value=“0”,  
placeholder=“Please choose a day”,  
className=“day-picker”  
)  
],  
style={‘margin-bottom’:‘30px’}),

```
                html.Div(
                    [
                        html.H2("Yelp Data App", style={'font-family': 'Dosis'})
                    ]
                ),

                html.Div(
                    [
                        html.Div(
                            [
                                dcc.Graph(id='map-graph',
                                          clickData={'points': [{'customdata': 'Subway'}]})
                            ],
                            style={'padding-bottom':'15px',
                                   'padding-left':'7px',
                                   'padding-right':'7px',
                                   'float':'left'}
                        ),

                        html.Div(
                            [
                                html.Img(
                                    id='wordcloud',
                                    style={'height':'200px',
                                           'width':'420px'}
                                )
                            ],
                            style={'margin-left':'65%'}
                        )
                    ]
                ),

                html.Div(
                    [
                        dcc.Dropdown(
                            id='bar-selector',
                            options=[
                                {'label':'Airport', 'value':'Airport'},
                                {'label':'Night Club', 'value':'Night Club'},
                                {'label':'Restaurant', 'value':'Restaurant'},
                                {'label':'Hotel & Casino', 'value':'Hotel & Casino'},
                                {'label':'Shopping', 'value':'Shopping'},
                                {'label':'Beauty & Spas', 'value':'Beauty & Spas'},
                                {'label':'Other', 'value':'Other'}
                            ],
                            value="Restaurant",
                            multi=True,
                            placeholder='Select categories using the box',
                            className='bars'
                            ),

                        html.P("", id="popupAnnotation", className="popupAnnotation")
                    ],
                    className="graph twelve coluns")],
                    style={'margin-top': '30px',
                           'margin-bottom': '30px'}
                ),

            html.Div(
                [
                    dcc.Slider(
                        id="my-slider",
                        min=0,
                        step=1,
                        value=12,
                        max=23,
                        marks={int(hour): str(hour)+str(':00') for hour in checkin['hour'].unique()}
                    )
                ],
                style={'margin-top': '20px',
                       'margin-left': '12px',
                       'margin-right':'12px'}
            ),

            html.Div(
                [
                    dcc.Checklist(
                        id="mapControls",
                        options=[
                            {'label': 'Lock Camera', 'value': 'lock'}
                        ],
                        values=[''],
                        labelClassName="mapControls",
                        inputStyle={"z-index": "3"}
                    )
                ]
            ),
    ],
    className="graphSlider ten columns offset-by-one"), html.Div(id='selected-data')
],
style={"padding-top": "60px"}

```

)

def select\_data(df, day, hour):  
output = df[[‘name’, ‘latitude’, ‘longitude’, ‘checkins’, ‘category’]][(df.day==int(day))&(df.hour==int(hour))]  
return output

def checkin\_size(df, low\_limit, upper\_limit):  
output = df[(df[‘checkins’]\>=low\_limit)&(df[‘checkins’]\<upper\_limit)]  
return output

def generate\_wordcloud(df, business\_name):  
texts = df.text.values  
wc = WordCloud(background\_color=“black”, max\_words=2000, stopwords=STOPWORDS, height=200, width=540)  
wc.generate(" ".join(texts[:10000]))

```
wc.to_file('/Users/reinaldogani/Desktop/'+business_name+'.png')

```

@app.callback(Output(“wordcloud”, “src”),  
[Input(“map-graph”, “clickData”)])  
def update\_wordcloud(clickData):  
df = vegas\_tip  
business\_name = clickData[‘points’][0][‘customdata’]  
dff = df[df[‘name’] == str(business\_name)]  
generate\_wordcloud(dff, business\_name)

```
return img_source

```

‘’’  
@app.callback(Output(“selected-data”, “children”),  
[Input(“map-graph”, “clickData”)])  
def update\_display(clickData):  
input\_value = clickData[‘points’][0][‘customdata’]  
return ‘you enter “{}”’.format(input\_value)  
‘’’

@app.callback(Output(“map-graph”, “figure”),  
[Input(“my-dropdown”, “value”),  
Input(“my-slider”, “value”),  
Input(“bar-selector”, “value”)])

def update\_graph(day, hour, category):  
zoom = 10.5  
latInitial = 36.1  
lonInitial = -115.2  
bearing = 0

```
df=select_data(checkin, day, hour)

check_ins=[]

for i in range(len(category)):
    dataframe=df[df.category==category[i]]
    check_in = dict(
        type='scattermapbox',
        lat=dataframe['latitude'],
        lon=dataframe['longitude'],
        mode='markers',
        hoverinfo="text",
        text=dataframe['name'],
        customdata=dataframe['name'],
        name=category[i],
        marker=Marker(
            opacity=0.6,
            size=dataframe['checkins']/10
        )
    )
    check_ins.append(check_in)

layout=dict(
    autosize=True,
    height=500,
    margin=Margin(l=0, r=0, t=0, b=0),
    showlegend=False,
    mapbox=dict(
        accesstoken=mapbox_access_token,
        center=dict(
            lat=latInitial,
            lon=lonInitial),
        style='light',
        bearing=bearing,
        zoom=zoom
        )
    )

figure = dict(data=check_ins, layout=layout)
return figure

```

 ![45%20PM%20(2)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/b274566cb469eaa5e44c90ad43d7cd5690d56aa8.jpg)