i have a line chart that has date as X axis. i want to filter this with a double (two) sided slide button for filtering proposes. So i want to be able to filter the data from starting and end date of the dataframe. my date is in YYYY-MM-DD format, so it needs to be transformed.
my data:
data = {'Adj Close': [1.308934, 2.169581, 2.876765, 2.357847, 2.179156],'Yahoo Finance return': [0.670226, 1.298566, 0.920492, -0.721652, -0.306659],'date_x': ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01'],'Return in USD': [-0.641970, 0.428617, 0.404568, 0.125614, 0.070045]}# Convert the dictionary into a DataFramedf = pd.DataFrame(data)# Make sure that 'date_x' is a datetime columndf['date_x'] = pd.to_datetime(df['date_x'])my code for creating the line chart:
final_melted = df.melt(id_vars=['date_x'], var_name='Metric', value_name='Value')selection_metric_1 = alt.binding_select(options=['Adj Close', 'None','Yahoo Finance return', 'Return in USD'], name='Metric 1 ')select_metric_1 = alt.selection_single(fields=['Metric'], bind=selection_metric_1, name="Selector 1")# Dropdown selection for the second metricselection_metric_2 = alt.binding_select(options=['Adj Close','None', 'Yahoo Finance return', 'Return in USD'], name='Metric 2 ')select_metric_2 = alt.selection_single(fields=['Metric'], bind=selection_metric_2, name="Selector 2")# Dropdown selection for the third metricselection_metric_3 = alt.binding_select(options=['Adj Close','None', 'Yahoo Finance return', 'Return in USD'], name='Metric 3 ')select_metric_3 = alt.selection_single(fields=['Metric'], bind=selection_metric_3, name="Selector 3")line_chart = alt.Chart(final_melted).mark_line().encode( x='date_x:T', y=alt.Y('Value:Q', axis=alt.Axis(title='Metric Value')), color='Metric:N')# Points layer, making it easier to hover over individual pointspoints = alt.Chart(final_melted).mark_point().encode( x='date_x:T', y='Value:Q', color='Metric:N', tooltip=['date_x:T', 'Value:Q', 'Metric:N']).properties( width=1600, height=800)# Conditional filters based on the selectionfiltered_chart = alt.layer(line_chart, points).add_selection( select_metric_1, select_metric_2, select_metric_3 # Add the third selection here).transform_filter( select_metric_1 | select_metric_2 | select_metric_3 # Apply the filter based on the third selection as well).interactive()configured_chart = filtered_chart.configure_axis( titleFontSize=15, # Adjust the size as needed for axis titles labelFontSize=15 # Adjust the size as needed for axis labels).configure_legend( titleFontSize=15, # Adjust legend title size labelFontSize=12 # Adjust legend labels size).configure_title( fontSize=24 # Adjust chart title size).configure_legend( titleFontSize=17, # Adjust the font size for the legend title labelFontSize=15 # Adjust the font size for the legend labels)
