How To Create a Drilldown Tree for Charts

Drill down trees are useful in presenting different sets of categorical data in a chart. Using XML format, data can be organized in a hierarchical format.

Setting up

In the coach view, choose a chart that has menu options. In the configuration options, ensure that Enable Menu is checked.

Add a Data Service

Add an Ajax Service for the Data Service configuration option. If you do not already have one, create a new one by clicking the new button on the right.

Add Variables (In the Ajax Service)

Input: input (ANY), drillDownStack(DataDimension)(List)

Output: dataSeries(DataSeries), drillDownStack(DataDimension)(List), availableForDrillDown(DataDimension)(List)

Private: xml(String)

Server Scriplet and the "Execute Drill-down Query" General System Service (In the Ajax Service)

Add XML to the Server Scriplet

Bind the xml private variable, and then to create a hierarchical data structure using XML.

XML Structure Explained

The basic example of the XML for a drill down tree is illustrated below; however, you can make these drilldown trees as complicated as you want branching off into multiple datasets.

<drilldown-spec>
<drilldown name="Type">
<js-query description="Qty sold by Product Type (Clothing/Appliance/Garden)">
<script>
<![CDATA[var data = [["CLOTHING", 1093], ["APPLIANCES", 174]];
populateDataSeries(data);
]]>
</script>
</js-query>

Notes:

<drilldown spec>: starts the drilldown tree
<drilldown name="Name">: this gives the name to the drilldown section
<js-query description="Description"> : this sets the title of the chart
<script>: Within these script tags, you populate the data
<in><field var="brand" ref="../@value"/></in> : in the "Gender" drilldown, there is an example using the <in> tags. Here you are essentially saying that you want to want to set the variable to "brand" and in order to find the information, go out one level/directory ../@value. If you want to go up two levels/directories, you use ../../@value, and so forth

Below is the visual representation of the drilldown tree:

Populate Drilldown Data (Option 1)

There are two ways to populate data, as shown above, you can use the CDATA tags:

<![CDATA[var data = [["Brand1", 363], ["Brand2", 556], ["Brand3",174]];
populateDataSeries(data);
]]>

Note that in order for the data to show up, you need to call populateDataSeries, and pass in data, populateDataSeries(data).

Populate Drilldown Data (Option 2)

Another option to accessing local variables instead of using the "populateDataSeries" convenience method would be to use the dataSeries data object:

<![CDATA[var data = [["CLOTHING", 1093], ["APPLIANCES", 174]];
tw.local.dataSeries.dataPoints = new tw.object.listOf.DataPoint();

for(var i = 0; i < data.length; i++){
tw.local.dataSeries.dataPoints[i] = new tw.object.DataPoint();
tw.local.dataSeries.dataPoints[i].label = data[i][0];
tw.local.dataSeries.dataPoints[i].value = data[i][1];
}
]]>

Map data to "Execute Drill-down Query" service

Map the variables to the "Execute Drill-down Query" Service.

Results