A calendar is a common component found in dashboards if a user is interested in seeing values on a particular day. This is great for going back in history to see past performance.
In this example, we will work with one month of data for September 2010, and the chart will change according to what the user selects on the calendar.
The portion of the spreadsheet containing the chart data will need to be set up in the following fashion. Each row of chart data will belong to a selectable day in the calendar. In this example, each row contains region sales data for a particular date.
- Drag a Calendar component from the Other section of the Components window onto the canvas.
- In the calendar properties, select Date as the Insertion Type and bind the Destination to the cell G3 of the spreadsheet, as shown in the following screenshot:
- Now, we will need to take the value from the destination date cell G3 in step 2 to find the corresponding row data from the Getting ready section. To do this, drag a Combo Box selector onto the canvas. In the Combo Box properties, select Row as the Insertion Type and bind Source Data to the chart dataset. Then, bind the Destination to the cells in the spreadsheet area in yellow (H3:K3). Set the Labels to the date values of the dataset.
- On the Behavior icon of the Combo Box selector, bind the Item from the Selected Item area to the Destination cell G3 of the calendar set from step 2. Then, drag the Combo Box selector to the same position as the chart, and order the Combo Box selector to the back of other components so that the user does not see the Combo Box selector during runtime.
- Bind the chart data to the chart destination cells H3:K3 from step 3.
In this example, we used a combination of a Calendar date component, a Combo Box selector, and a Column Chart component. The Calendar date component controls the date selected in step 1. Then, the Combo Box selector connects the date to the appropriate data row from the chart dataset in steps 3 and 4. Finally, in step 5, the chart is bound to the correct data row that was selected in steps 3 and 4.
You can read recipes on using chart objects to display data and how to use the Combo Box selector in Chapter 2, Data Visualization.