Create d3 Collapsible Tree Chart
This article provides a step by step example of creating a d3 Collapsible Tree chart.
1. Select Report
In this example the Product Category (e.g., wine, wine furniture, wine accessory) is the parent of the Product Subcategory (e.g., champagne, wine rack, bottle opener). Also, the Product Subcategory (e.g., wine rack) is the parent of the specific product (e.g., Bottle Wrought Iron Wine Jail). The first two columns describe this hierarchy using "parent" vs "child" terminology. In addition, note that the top level parent (root) of this hierarchy is signified by an empty value ("") in both the parent and child columns.
The name of the Product Category, Subcategory and Product will be displayed in the chart ("displayName") along with the total units sold ("displayValue") pertaining to that category, subcategory or product.
2. Adjust Display Name for chart columns
Display Names may be changed by clicking on the name in the Display Name column
Ensure that the Display Name for the columns that you will be charting do not contain spaces
3. Add the Chart
- Navigate to the Charts and Pivots tab
- Click the Add Chart button
4. Set Chart type
- Select d3 Collapsible Tree for Chart Type
5. Full Chart Editor Displays
Accept defaults or optionally change values for:
- Chart Name
- X-axis title
- Y-axis title
6. Adjust Custom Charting Variables
- Click the gear to edit each of the Custom Charting Variable Values to match the names of your columns
- Set the Value to the Display Name used in Step 2 above
NOTE: In this example, the query is written to return column names that match the Custom Charting Variable names exactly, therefore, the variables do not require any modification. (Refer to the first screen shot). In addition, the value returned for the top most "root" is the empty string ("") so the value for "rootValue" above is correct.
More information about Custom Charting Variables can be found here