Creating the Callback Function

00:00 Creating a callback function. In the previous section, you defined how the user will interact with your application. In this section of the course, you’ll create the code that will react to these changes and allow dynamic update of the onscreen charts. For that, you’ll be using callback functions.

00:19 Dash’s callback functions are regular Python functions with an @app.callback() decorator. In Dash, when an input changes, a callback function is triggered.

00:31 The function performs some predetermined operations, such as filtering a dataset, and returns an output to the application. In essence, callbacks link inputs and outputs in your app.

00:45 The .callback() function’s overall structure looks like this. The .callback() decorator’s parameters are two lists. One is a list of outputs which will be returned to the application, and the second is a list of inputs, which are the interactive elements coming from the page.

01:01 These are presented as inputs to the function, which processes the data and returns to the application via the callback. Note that the inputs to and outputs from the function are in the order presented in the decorator. Note that the Input object discussed here is imported from dash.dependencies.

01:21 Be careful not to confuse it with the component coming from dash_core_components These objects are not interchangeable and have different purposes.

01:31 Let’s take a closer look at Output and Input. dash.dependencies.Output takes a component_id and a component_property.

01:41 The component_id is the identifier of the element to modify. The component_property is the property of the element to modify. In this example, the output would update the price chart’s figure property.

01:57 In a similar way Input takes two parameters: component_id and component_property. This time, the component_id is the identifier of the element to watch, and component_property is the property of that watched element.

02:13 In the example seen onscreen, "region-filter" is being watched for changes. Once it’s altered, the value property will be passed as an input.

02:24 Here, you can see the callback decorator that will be used at first. It will watch the region filter and pass the value of that filter to the function. The function will return two values, which will be passed to the application as the price chart’s figure value and the volume chart’s figure value.

02:39 This fully explains why the code for the chart in the previous section of the course was missing the figure value. It’s provided by the callback function when the page initially loads and at any time that those inputs change.

02:53 Here you can see abbreviated code for the callback function body. The function takes the region, which was passed from the input in the decorator, and creates a Boolean mask of data with the regions that match the input value.

03:06 This mask is then applied to the data. Finally, the two nested dictionaries for the figures are created using the filtered data, and these are returned from the function via the decorator to the application itself.

03:22 Now that you understand what the code is doing at a high level, you’ll see it being created in full with a complete definition of the nested dictionaries for price_chart_figure and volume_chart_figure.

03:34 Firstly, Input and Output are imported from Dash’s dependencies module.

03:47 Next, the body of the callback function is entered.

05:56 With all of these elements in place, run app.py, and you should be greeted with an interactive page which allows the selection of region and an automatically updated chart each time a selection is made.

06:16 Now that you have your initial interactivity up and running, in the next section, you’ll see how to add more filters to the dashboard, allowing your users to hone in on exactly the data they’re interested in.