Python Plotly: Slider not Refreshing Scatter Plot

Question

I am going through the the slider animation plot tutorial from plotly (https://plot.ly/python/animations/), the one at the bottom, with my own data. My scenario is basically is data gathered from users from an application. I have data for one month (May), which the frequency of users are recorded hourly for each day. I want to use a slider to have a range of values from day 1 to 31 and the plot to show the unique values of each hour for each specific day.

My problem: ~~I only get day one, but the value of the slider is updating correctly.~~ Fixed old problem, now I have another one: Now instead of 1 step of the data, the graph is showing every single step.

My code:

# dMay to DataFrame
dfMay = pd.DataFrame({key :dMay[key] for key in list(dMay.keys())})
for i, df in enumerate([dfMay], 1):
    df.columns = [str(col_name)[6:].format(i) for col_name in df.columns]

keys = list(map(lambda x: str(x), dfMay.keys())) # Slider values - days
from plotly.grid_objs import Grid, Column
listOfCols = []
for col in keys:
    listOfCols.append(Column(dfMay[col], col))
grid = Grid(listOfCols)
py.grid_ops.upload(grid, 'Testing'+str(time.time()), auto_open=False)

# Animated Plot
figure = {
    'data': [],
    'layout': {},
    'frames': []
}

# fill in most of layout
figure['layout']['xaxis'] = {'range': [0, 23], 'title': 'Zaman (saat)'}
figure['layout']['yaxis'] = {'title': 'Kullanıcı Sayısı', 'type': 'linear'}
figure['layout']['hovermode'] = 'closest'
figure['layout']['sliders'] = {
    'args': [
        'transition', {
            'duration': 400,
            'easing': 'cubic-in-out'
        }
    ],
    'initialValue': '0',
    'plotlycommand': 'animate',
    'values': list(range(24)),
    'visible': True
}
figure['layout']['updatemenus'] = [
    {
        'buttons': [
            {
                'args': [None, {'frame': {'duration': 500, 'redraw': True},
                         'fromcurrent': True, 'transition': {'duration': 300, 'easing': 'quadratic-in-out'}}],
                'label': 'Play',
                'method': 'animate'
            },
            {
                'args': [[None], {'frame': {'duration': 0, 'redraw': True}, 'mode': 'immediate',
                'transition': {'duration': 0}}],
                'label': 'Pause',
                'method': 'animate'
            }
        ],
        'direction': 'left',
        'pad': {'r': 10, 't': 87},
        'showactive': False,
        'type': 'buttons',
        'x': 0.1,
        'xanchor': 'right',
        'y': 0,
        'yanchor': 'top'
    }
]

sliders_dict = {
    'active': 0,
    'yanchor': 'top',
    'xanchor': 'left',
    'currentvalue': {
        'font': {'size': 20},
        'prefix': 'Zaman:',
        'visible': True,
        'xanchor': 'right'
    },
    'transition': {'duration': 300, 'easing': 'cubic-in-out'},
    'pad': {'b': 10, 't': 50},
    'len': 0.9,
    'x': 0.1,
    'y': 0,
    'steps': []
}

# make data
start = 0
for day in keys:

data_dict = {
    'x': list(range(24)),
    'y': list(dfMay[day]),
    'mode': 'markers',
    'marker': {
        'sizemode': 'area',
        'sizeref': 200000,
        'size': 20
    },
    'name': day
}
figure['data'].append(data_dict)

# make frames
for day in keys:
    frame = {'data': [], 'name': str(day)}
    data_dict = {
        'x': list(range(24)),
        'y': list(dfMay[day]),
        'mode': 'markers',
        'text': list(dfMay[day]),
        'marker': {
            'sizemode': 'area',
            'sizeref': 200000,
            'size': 20
        },
        'name': day,
    }
    frame['data'].append(data_dict)

    figure['frames'].append(frame)
    slider_step = {'args': [
        [day],
        {'frame': {'duration': 1000, 'redraw': True},
         'mode': 'immediate',
       'transition': {'duration': 1000}}
     ],
     'label': day,
     'method': 'animate'}
    sliders_dict['steps'].append(slider_step)

    
figure['layout']['sliders'] = [sliders_dict]
print('Done')
plot(figure)

I also can,t get rid of the colored markers on the right!

EDIT 1: Added dfMay Table

EDIT 2: Changed problem, added a new plot

Images to Supplement:

For quick resolution, Share the code with sample data containing the issue? If possible the complete code!! — Naren Murali
– Naren Murali, Commented Jun 26, 2018 at 3:45
@NarenMurali the data is sensitive so I can't do that. I don't get any error message. I'll put a screenshot of what dfMay is. — Mert Karakas
– Mert Karakas, Commented Jun 26, 2018 at 4:35

Mert Karakas · Accepted Answer · 2018-07-03 07:48:05Z

Fixes slider related issue. I followed another plotly tutorial. https://plot.ly/~empet/14896

plotData=[dict(type='scatter',
          x=list(range(24)),
          y=test_data[:0],
          mode='markers',
          marker=dict(size=10, color='red')
              )
     ]

frames=[dict(data=[dict(y=test_data[:,k])],
             traces=[0],
             name=f'{k+1}',
             layout=dict(yaxis=dict(range=[-1, test_data[:, k].max()+100]))) for k in range(31)]

sliders=[dict(steps= [dict(method= 'animate',
                           args= [[ f'{k+1}'],
                                  dict(mode= 'e',
                                  frame= dict( duration=1000, redraw= False ),
                                           transition=dict( duration= 0)
                                          )
                                    ],
                            label=f' {k+1}'
                             ) for k in range(31)], 
                transition= dict(duration= 30 ),
                x=0,#slider starting position  
                y=0, 
                currentvalue=dict(font=dict(size=12), 
                                  prefix='Day: ', 
                                  visible=True, 
                                  xanchor= 'center'
                                 ),  
                len=1.0,
                active=1) #slider length)

           ]

axis_style=dict(showline=True,
               mirror=True,
               zeroline=False,
               ticklen=4)

layout=dict(title='Mayıs-Günlük Kullanıcı Sayıları',
            width=900,
            height=600,
            autosize=False,
            xaxis=dict(axis_style, dtick=1, tit='s' title='Zaman (saat)', **dict(range=[0,24])),
            yaxis=dict(axis_style, title='Kullanıcı Sayısı',autorange=False),
            #plot_bgcolor="rgba(66,134,244, 0.2)",
            shapes= [dict(
                        # Sabah
                        type= 'rect',
                        xref= 'x',
                        yref= 'paper',
                        x0= '0',
                        y0= 0,
                        x1= '8',
                        y1= 1,
                        fillcolor= 'rgba(66, 134, 244, 0.5)',
                        opacity= 0.2,
                        line= dict(width= 0)
                    ),
                     # Oglen
                    dict(
                        type= 'rect',
                        xref= 'x',
                        yref= 'paper',
                        x0= '8',
                        y0= 0,
                        x1= '16',
                        y1= 1,
                        fillcolor= '#rgba(255, 252, 117,1)',
                        opacity= 0.2,
                        line= dict(width=0)
                    ),
                      # Aksam
                    dict(
                        type= 'rect',
                        xref= 'x',
                        yref= 'paper',
                        x0= '16',
                        y0= 0,
                        x1= '24',
                        y1= 1,
                        fillcolor= 'rgba(2, 0, 168, 1)',
                        opacity= 0.2,
                        line= dict(width=0)
                    )
            ],
            hovermode='closest',
            updatemenus=[dict(type='buttons', showactive=True,
                                y=0,
                                x=1.15,
                                xanchor='right',
                                yanchor='top',
                                pad=dict(t=0, r=10),
                                buttons=[dict(label='Play',
                                              method='animate',
                                              args=[None, 
                                                    dict(frame=dict(duration=4000, 
                                                                    redraw=True),
                                                         transition=dict(duration=4000),
                                                         fromcurrent=True,
                                                         mode='immediadate'
                                                        )
                                                   ]
                                             ),
                                         dict(label='Pause',
                                              method='animate',
                                              args=[[None], 
                                                    dict(frame=dict(duration=0, 
                                                                    redraw=False),
                                                         transition=dict(duration=30),
                                                         fromcurrent=True,
                                                         mode='immediate'
                                                        )
                                                   ]
                                             )
                                        ]
                               )
                          ],
              sliders=sliders
           )

# Animated Plot
figure = {
    'data': plotData,
    'layout': layout,
    'frames': frames
}  
fig=dict(data=plotData, frames=frames, layout=layout)
fig['data'][0].update(mode='markers+lines',
                     line=dict(width=1.5, color='blue'))
plot(fig, auto_open=False)

Collectives™ on Stack Overflow

Python Plotly: Slider not Refreshing Scatter Plot

My code:

EDIT 1: Added dfMay Table

EDIT 2: Changed problem, added a new plot

Images to Supplement:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My code:

EDIT 1: Added dfMay Table

EDIT 2: Changed problem, added a new plot

Images to Supplement:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related