Adding More Interactivity

00:00 Adding more interactivity. In the previous video, you created a callback function to allow Dash’s interactivity to work. With all of that in place, you can now add extra interactivity following the same pattern.

00:15 The next filter will allow selection of avocado type. You’ll be pleased to know that once you have the foundations in the previous section in place and interactive charts working, adding additional filters involves less code. First, create the dropdown in the page, straight after the first dropdown code.

01:15 Secondly, add the input to the @app.callback() decorator, allowing this input data to be passed to the callback function. Finally, update the callback function to further filter the data.

01:41 Note that the two expressions are combined using an and so that only the data that passes both filters will be displayed. Onscreen, you can see the app running with two filters in place.

01:59 Adding a further filter to the dashboard follows the same workflow as seen previously. First, the filter is added to the HTML code for the page. Note that here, instead of a dropdown menu, a date range is added.

02:15 This is configured by adding appropriate start and end dates which would adapt to the date spans of an alternate set of data should one be used in the future.

02:49 Once this element is added, the date range start date and end date are added to the @app.callback() decorator, allowing them to be passed to the callback function.

03:09 Finally, the callback function itself is altered. Firstly, start date and end date variables are added, and then the mask is updated.

03:25 Note that once more, the appropriate filters are added using an and to allow only data which passes all of the set filters to be displayed on the chart.

03:36 Onscreen, you can now see the final version of the application, where it’s possible to filter by region, avocado type, and date range, allowing a user to quickly zero in on the information they’re interested in.

03:53 The final step in the process is to make the dashboard public so that you can share it with others, and you’ll see how to do that in the next section of the course.