Add Filter to Time Graph in Plotly

Question

I would like to make a time graph on poorly using a pandas dataframe. For example, let’s say that I have multiple cars, and I’ve recorded down their fuel efficiency based on time of date. I want to plot a time graph of efficiency, with a filter for the different cars (not what I’m actually plotting, but it is the same basic idea). I know that I would start of by doing something like

fig = px.line(df, x=‘Date’, y=‘Fuel Efficiency’)

but how can I specify that I want to filter based on cars (There are many cars, so I can't write them all out in a list for example.) ? Also, can I create a selector on the graph so I can change the filter (I think I can add a drop-down menu in a plotly graph)? Thanks!

It would be easy to understand if you gave some sample data. However, looking the scenario, I think you can add the cars name in `color` variable. For ex: `fig= px.line(df, x='Date', y='Fuel Efficiency', color='car_name')` — sharmajee499, Aug 06 '20 at 01:32

score 0 · Accepted Answer · answered Aug 06 '20 at 05:12

I prototyped the one with a select button in plotly. See the official reference. The sample data was created as appropriate.

import pandas as pd
import numpy as np
import io

data = '''
date car "Fuel Efficiency"
2020-01-01 "Audi Q5" 12.38
2020-01-02 "Audi Q5" 11.06
2020-01-03 "Audi Q5" 9.34
2020-01-04 "Audi Q5" 13.78
2020-01-05 "Audi Q5" 10.23
2020-01-06 "Audi Q5" 11.55
2020-01-07 "Audi Q5" 12.02
2020-01-08 "Audi Q5" 12.66
2020-01-09 "Audi Q5" 13.23
2020-01-10 "Audi Q5" 14.22
2020-01-01 "Merucedes GLE" 9.87
2020-01-02 "Merucedes GLE" 8.06
2020-01-03 "Merucedes GLE" 9.34
2020-01-04 "Merucedes GLE" 9.78
2020-01-05 "Merucedes GLE" 10.23
2020-01-06 "Merucedes GLE" 9.55
2020-01-07 "Merucedes GLE" 10.02
2020-01-08 "Merucedes GLE" 9.66
2020-01-09 "Merucedes GLE" 8.23
2020-01-10 "Merucedes GLE" 9.22
2020-01-01 "BMW X5" 11.87
2020-01-02 "BMW X5" 14.06
2020-01-03 "BMW X5" 11.34
2020-01-04 "BMW X5" 10.78
2020-01-05 "BMW X5" 11.23
2020-01-06 "BMW X5" 12.57
2020-01-07 "BMW X5" 14.02
2020-01-08 "BMW X5" 13.86
2020-01-09 "BMW X5" 13.63
2020-01-10 "BMW X5" 11.22

'''

df = pd.read_csv(io.StringIO(data), sep='\s+')

import plotly.graph_objects as go

audi = df[df['car'] == 'Audi Q5']
benz = df[df['car'] == 'Merucedes GLE']
bmw = df[df['car'] == 'BMW X5']
x = df['date'].unique()

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=audi['Fuel Efficiency'],
                    mode='lines+markers',
                    name='Audi Q5', marker=dict(color="DarkOrange"))),
fig.add_trace(go.Scatter(x=x, y=benz['Fuel Efficiency'],
                    mode='lines+markers',
                    name='Merucedes GLE', marker=dict(color="Crimson"))),
fig.add_trace(go.Scatter(x=x, y=bmw['Fuel Efficiency'],
                    mode='lines+markers', name='BMW X5', marker=dict(color="RebeccaPurple")))

fig.update_layout(title_text='Fuel Efficiency Visual',
                 xaxis_title='Date', yaxis_title='FuelEfficiency')


fig.update_layout(
    updatemenus=[
        dict(active=0,
            buttons=list([
            dict(label="None",
                 method="update",
                 args=[{"visible":[True,True,True]},
                       {"title":"ALL"}]),
            dict(label="Audi Q5",
                 method="update",
                 args=[{"visible":[True, False, False]},
                       {"title":"Audi Q5"}]),
            dict(label="Merucedes GLE",
                 method="update",
                 args=[{"visible":[False,True,False]},
                       {"title":"Merucedes GLE"}]),
            dict(label="BMW X5",
                 method="update",
                 args=[{"visible":[False,False,True]},
                       {"title":"BMW X5"}])
        ]),
        )
    ]
)

fig.show()

This is exactly what I wanted! Thank you! Quick question, though. Let's say that in my dataset, I have hundreds of thousands of different car models. I wouldn't be able to write out a scatter and a label for each one, so is there any way I can use df['car'].unique() to do it for me? — Sathvik Chinta, Aug 06 '20 at 18:47
I was able to get something working like this for i in items: fig.add_trace(go.Scatter(x=x, y=df[df['car'] == i]['FuelEfficiency'], mode='lines+markers', name=i)) buttons = list() for i in items: buttons.append(dict(label=i, method="update", args=[{"visible":[True,True,True]}, {"title": i}])) fig.update_layout( updatemenus=[ dict(active=0, buttons=buttons ) ] ) The graph is not changing, though. — Sathvik Chinta, Aug 06 '20 at 19:38
Your approach is the right one. Now we need to control the display of the graph for each car. I don't have an idea right now, but good luck with that. — r-beginners, Aug 07 '20 at 01:33
How about creating a list of 'False' for the number of cars and then updating the i-th False to True in the loop process? — r-beginners, Aug 07 '20 at 01:35
The for loop method seems to work as intended. I created a list of false, and updated to be true for the args and that works as intended. Thank you! — Sathvik Chinta, Aug 10 '20 at 21:51

Add Filter to Time Graph in Plotly

1 Answers1