4.2 Walkthrough: Interactive Chart Drilldown
Walkthrough
In this example, you will create a Selection Tree that filters the geographical regions displayed on a Chart. You will use the drillMember property of the Selection List to dynamically adapt the Chart X-axis to display the appropriate geographical level (Region, State, or City), based on user selections.
Follow the steps below:
1. Create a new Viewsheet based on the 'Sales' > 'Sales Explore' Worksheet.
2. From the Component panel, drag a Chart component into the Viewsheet grid. Resize the Chart as desired.
3. From the Component panel, drag a Selection Tree component into the Viewsheet grid.
4. Add a three-level geographical hierarchy to the Selection List. Follow the steps below:
a. Expand the 'Sales' Data Block in the Component panel.
b. Drag the 'Region' field from the Data Block onto the Selection Tree. This adds the 'Region' data to the tree.
c. Drag the 'State' field from the Data Block onto the Selection Tree. This adds the 'State' data to the tree.
d. Drag the 'City' field from the Data Block onto the Selection Tree. This adds the 'City' data to the tree.
e. Resize the Selection Tree so that it can display a reasonable number of options.

5. Click the 'Edit' button on the Chart to open the Chart Editor.
6. From the Data Source panel of the Chart Editor, drag the 'Total' field (Under 'Measures') to the 'Y' region in the Data panel.
7. From the Data Source panel of the Chart Editor, drag the 'Region' field (Under 'Dimensions') to the 'X' region in the Data panel.
8. Configure the Chart to adapt the X-axis binding based on the user's selection in the Selection Tree. To do this, follow the steps below:
a. Click the “arrow” button next to the 'Region' dimension in the Data panel. In the pop-up menu, select the 'Expression' option.

b. Click the 'Edit' button to open the Script Editor.

c. In the top-left panel of the Script Editor, expand the 'SelectionTree1' node, and click 'drillMember'. This adds the SelectionTree1.drillMember property in the editing area.

The drillMember property returns the name of the field that resides one level (in the Selection Tree hierarchy) below the lowest level that the user has selected. Thus, if the user has selected one or more states in the Selection Tree, SelectionTree1.drillMember returns the string 'City'.
d. Click 'OK' in the Chart Editor. The output of SelectionTree1.drillMember is now assigned to the Chart X-axis binding.

9. Verify that the X-axis binding adapts to the user's selections:
a. Click the 'Clear Selection' button in the Selection Tree to remove any existing selections. Observe that the Chart X-axis now represents the 'Region' dimension, the top level of the Selection Tree hierarchy.
b. Select the 'USA East' option in the Selection Tree. Observe that the Selection Tree now filters the Chart to display only data from the 'USA East' region. In addition, the Selection Tree drillMember property changes the X-axis binding to represent the 'State' dimension, which is one level below 'Region' in the Selection Tree hierarchy.
c. Select the 'CT' and 'MA' options in the Selection Tree. Observe that the Selection Tree now filters the Chart to display only data from the states of 'CT' and 'MA'. In addition, the Selection Tree drillMember property changes the X-axis binding to represent the 'City' dimension, which is one level below 'State' in the Selection Tree hierarchy.

See Also
Drilling Down into a Chart, for information on the built-in drill-down feature.
| << 4.1 Walkthrough: Accessing User Selections | © 1996-2013 InetSoft Technology Corporation (v11.5) | 5 Accessing Component Data >> |