Line chart with slider in plotly dash

Line chart with slider in plotly dash

Create line chart with slider in plotly dash using an interactive plotly data visualization library and dash web library.

Input: Slider

This line chart with slider in plotly dash is fully dynamic because values dynamically change on x-axis of the line chart in this dash app. Main function of this dash slider is that it displays unselected values on x-axis of any plotly chart. There are only one dash input component and one graph component in this dash app. Moving cursor on slider from left to right, values on x-axis of the line chart dynamically change because this dash core component displays only unselected values on x-axis of the chart.

See below how this dashboard work?

Slider

First of all, create layout of slider inside the dash app layout. Almost all parameters are same for this dash input core component. I have added parameter in line 6 update mode is equal to drag, you can see below in the code template. It creates drag effect on slider and during dragging on slider values dynamically change on x-axis of the line chart. I have selected minimum value and maximum value in min and max parameters respectively 1925 and 2020 because this is the low value and high value in the dataset. In marks parameter, I have created string inside dictionary to display values on slider.

Line Chart

Callback is main part in this Line chart with slider in plotly dash. See below code for line chart in the code template. Use id of graph and slider as output and input in the app callback function. After that, define the function to display data on the line chart and change the data on the line chart dynamically by changing the values on the slider. I have created two data frames to create two lines on this plotly chart in the dash app. You can see below in the lines 4 to 7 and 9 to 12. I have created two data frames in the pandas read function using the same csv file. You can see below in the full code template lines 9 and 10.

This is because of extracting data for movies and tv shows separately. To avoid form errors, it is easy for us if we give the two names the same dataset. In line 7 you can see, I have filtered the slider value from the newly created data frame. Use greater than or equal to operator with slider id to get values from the year column. In data section, I have used various parameters for line chart. For example, in lines 21 and 22, you can see below in the code template. I have used line and markers parameters to format line and markers on the line chart. Other parameters can be seen below in the code template.

Download the full code and CSV data file and learn more about plotly dash on Udemy.


If you have any problem in learning above code, please comment in the comment box. I will help you as soon as possible.


Recommended For You

About the Author: Mubeen Ali

I am passionate about learning Dash. Dash is a python framework that creates beautiful web based data visualization dashboards.