Appboard/old/widgets/tree map - Revision history

imported>Jason.nicholls at 14:04, 17 July 2014

2014-07-17T14:04:21Z

← Older revision		Revision as of 14:04, 17 July 2014
Line 1:		Line 1:
			{{DISPLAYTITLE:Tree Map Widget}}
			[[Category:AppBoard old]]
	The Tree Map Widget displays hierarchical data as a set of nested rectangles. The size and color of each rectangle is determined by data. The grouping and display of the rectangles can also be managed by using relationships in the data.		The Tree Map Widget displays hierarchical data as a set of nested rectangles. The size and color of each rectangle is determined by data. The grouping and display of the rectangles can also be managed by using relationships in the data.

imported>Jason.nicholls: moved Tree Map Widget to appboard/old/widgets/tree map

2014-07-17T13:56:33Z

moved Tree Map Widget to appboard/old/widgets/tree map

← Older revision	Revision as of 13:56, 17 July 2014
(No difference)

imported>Jason.nicholls: /* How To Create a Tree Map */

2014-07-17T07:04:53Z

How To Create a Tree Map

← Older revision		Revision as of 07:04, 17 July 2014
Line 7:		Line 7:
	== How To Create a Tree Map ==		== How To Create a Tree Map ==

	For instructions on creating a Widget, see the general instructions in [[~~Widgets~~#Adding_Widgets\|Adding Widgets]]. The <b>Tree Map</b> Widget type is located under the <b>Maps</b> category on the Widget selection screen.		For instructions on creating a Widget, see the general instructions in [[appboard/old/widgets#Adding_Widgets\|Adding Widgets]]. The <b>Tree Map</b> Widget type is located under the <b>Maps</b> category on the Widget selection screen.


	== How To Configure a Tree Map ==		== How To Configure a Tree Map ==

imported>Jason.nicholls: /* How To Configure a Tree Map */

2014-07-17T04:19:19Z

How To Configure a Tree Map

← Older revision		Revision as of 04:19, 17 July 2014
Line 24:		Line 24:
	#* <b>Default Color</b>: Sets the default value to use for squares in which none of the Color Filter Rules apply.		#* <b>Default Color</b>: Sets the default value to use for squares in which none of the Color Filter Rules apply.
	#* <b>Data Tips</b>: Launches a dialog that lets you choose which fields will appear in the datatip that appears when a user mouses over a square.		#* <b>Data Tips</b>: Launches a dialog that lets you choose which fields will appear in the datatip that appears when a user mouses over a square.
	# Click <b>Next</b> and provide additional configuration, if needed, on the <b>Options</b> tab. For details on the available Options, see [[~~Options~~\|Options]].		# Click <b>Next</b> and provide additional configuration, if needed, on the <b>Options</b> tab. For details on the available Options, see [[appboard/old/options\|Options]].
	# Click <b>Next</b> to proceed to the <b>Actions</b> tab.		# Click <b>Next</b> to proceed to the <b>Actions</b> tab.
	# Click <b>Add Event Action</b> to configure one or more [[~~Actions~~\|Actions]] to be invoked when a user clicks on the Tree Map Widget. The action will apply to the current data record being displayed.		# Click <b>Add Event Action</b> to configure one or more [[appboard/old/actions\|Actions]] to be invoked when a user clicks on the Tree Map Widget. The action will apply to the current data record being displayed.
	# Click <b>Finish</b>.		# Click <b>Finish</b>.
	# In the <b>Builder Modes</b> panel, select <b>Builder</b> and navigate to the appropriate Board to observe the new Tree Map Widget.		# In the <b>Builder Modes</b> panel, select <b>Builder</b> and navigate to the appropriate Board to observe the new Tree Map Widget.


	== Data Configuration ==		== Data Configuration ==

imported>Mike.berman: add instruction for client side filter of records with parent id)

2013-04-28T13:06:52Z

add instruction for client side filter of records with parent id)

← Older revision		Revision as of 13:06, 28 April 2013
Line 121:		Line 121:
	## Use the "Select Entity" drop-downs to set an association of "sample.TreeMap.TreeMapData.Network_ID" = "sample.TreeMap.TreeMapData.Parent_ID"		## Use the "Select Entity" drop-downs to set an association of "sample.TreeMap.TreeMapData.Network_ID" = "sample.TreeMap.TreeMapData.Parent_ID"
	# Click "Finish".		# Click "Finish".


			=== Filter the Data Source ===
			# Create a Data Collections called "sample.FilteredTreeMapData".
			# For the Data Collection, select "sample.TreeMap.TreeMapData".
			# Click "Next" to go to the Client Side Filter configuration panel.
			# Click "Add Rule" to configure a Client Side Filter Rule.
			# Configure the Property of the rule to be "Parent_ID" = "is empty". This will filter out all of the data elements with a parent_id from the top-level presentation in the Tree Map Widget.
			# Preview the Data Collection to confirm that it only has 4 items (with 24 items filtered out).


	=== Configure the Widget ===		=== Configure the Widget ===
	# For the Data Collection, select "sample.~~TreeMap~~.TreeMapData"		# For the Data Collection, select "sample.FilteredTreeMap.TreeMapData"
	# For the Label Field, select "Location"		# For the Label Field, select "Location"
	# For the Area Field, select "Outages"		# For the Area Field, select "Outages"
Line 132:		Line 141:
	## Repeat the same step for the colors green, gray, blue, white, and brown		## Repeat the same step for the colors green, gray, blue, white, and brown
	## Click "X" to close the Color Filter editor		## Click "X" to close the Color Filter editor
	~~# Select "Configure" under "Data Tips" and check the boxes for "ID", "Location", and "Outages"~~


	The completed Widget should provide a display similar to the following:		The completed Widget should provide a display similar to the following image:

	[[Image:TreeMapSample.png\|thumb\|center\|700px\|Tree Map Widget Using Sample Data]]		[[Image:TreeMapSample.png\|thumb\|center\|700px\|Tree Map Widget Using Sample Data]]

	Note that the data in the West and South regions provides a deeper branching of detail than the data in the East and North regions.		Note that the data in the West and South regions provides a deeper branching of detail than the data in the East and North regions.


			A common mistake would be to skip the "Filter the Data Source" step above. If that were done, the Widget would have empty space as shown in the following image:

			[[Image:TreeMapSampleUnfiltered.png\|thumb\|center\|700px\|Tree Map Widget Without Proper Data Filter]]

imported>Mike.berman: update sample image

2012-11-05T04:14:58Z

update sample image

← Older revision		Revision as of 04:14, 5 November 2012
Line 2:		Line 2:


	[[Image:~~TreeMapWidget~~.png\|thumb\|center\|700px\|~~A Sample~~ Tree Map Widget]]		[[Image:TreeMapSample.png\|thumb\|center\|700px\|Tree Map Widget Using Sample Data]]

imported>Mike.berman at 17:28, 28 June 2012

2012-06-28T17:28:54Z

← Older revision		Revision as of 17:28, 28 June 2012
Line 18:		Line 18:
	#* <b>Label Field</b>: Select the field from the Data Collection to use for the label that appears inside each of the squares.		#* <b>Label Field</b>: Select the field from the Data Collection to use for the label that appears inside each of the squares.
	#: Note: The labels will be hidden if squares become to small.		#: Note: The labels will be hidden if squares become to small.
	#* <b>Font ~~Sze~~</b>: Controls the font size of the labels in each of the squares.		#* <b>Font Size</b>: Controls the font size of the labels in each of the squares.
	#* <b>Area Field</b>: Select the field from the Data Collection that will determine the size of the squares displayed in the tree map.		#* <b>Area Field</b>: Select the field from the Data Collection that will determine the size of the squares displayed in the tree map.
	#* <b>Area Roll Up</b>: Toggle this option on to allow the parent area to be factored into the size calculation. If the parent row already contains a value equal to the sum of its children, then this should be set to "Ignore Parent Area" so that the size of the square is not doubled by adding the value twice. If the parent nodes have blank or zero values, then this can be set to "Include Parent Area"		#* <b>Area Roll Up</b>: Toggle this option on to allow the parent area to be factored into the size calculation. If the parent row already contains a value equal to the sum of its children, then this should be set to "Ignore Parent Area" so that the size of the square is not doubled by adding the value twice. If the parent nodes have blank or zero values, then this can be set to "Include Parent Area"

imported>Mike.berman: created page

2012-06-28T17:25:50Z

created page

New page

The Tree Map Widget displays hierarchical data as a set of nested rectangles. The size and color of each rectangle is determined by data. The grouping and display of the rectangles can also be managed by using relationships in the data.

[[Image:TreeMapWidget.png|thumb|center|700px|A Sample Tree Map Widget]]

== How To Create a Tree Map ==

For instructions on creating a Widget, see the general instructions in [[Widgets#Adding_Widgets|Adding Widgets]]. The Tree Map Widget type is located under the Maps category on the Widget selection screen.

== How To Configure a Tree Map ==

# Follow the instructions above to create the basic "Tree Map" Widget.
# Enter the following information on the Data tab:
#* Data collection: Select the name of the Data Collection that will provide the data to be displayed in the Advanced Status List.
#: Note: For convenience, buttons are provided for Adding, Editing, or Previewing a Data Collection.
#* Label Field: Select the field from the Data Collection to use for the label that appears inside each of the squares.
#: Note: The labels will be hidden if squares become to small.
#* Font Sze: Controls the font size of the labels in each of the squares.
#* Area Field: Select the field from the Data Collection that will determine the size of the squares displayed in the tree map.
#* Area Roll Up: Toggle this option on to allow the parent area to be factored into the size calculation. If the parent row already contains a value equal to the sum of its children, then this should be set to "Ignore Parent Area" so that the size of the square is not doubled by adding the value twice. If the parent nodes have blank or zero values, then this can be set to "Include Parent Area"
#* Color Filter: Enabling this option lets you set up rules that allow the data to determine the background color of each square.
#* Default Color: Sets the default value to use for squares in which none of the Color Filter Rules apply.
#* Data Tips: Launches a dialog that lets you choose which fields will appear in the datatip that appears when a user mouses over a square.
# Click Next and provide additional configuration, if needed, on the Options tab. For details on the available Options, see [[Options|Options]].
# Click Next to proceed to the Actions tab.
# Click Add Event Action to configure one or more [[Actions|Actions]] to be invoked when a user clicks on the Tree Map Widget. The action will apply to the current data record being displayed.
# Click Finish.
# In the Builder Modes panel, select Builder and navigate to the appropriate Board to observe the new Tree Map Widget.

== Data Configuration ==

Because the display of the Tree Map Widget is driven by the data, it is important to understand how the associations in the data are used to manage the presentation of the Widget.

The Data Collection used by the Widget must have a 1-to-many association configured, with the name "children". This association defines the two fields (columns) that associate rows of the data with one another.

Below is a table illustrating the layout of a typical datset that would be used by the Tree Map Widget:

{| class="wikitable" border="1" style="background-color:#eeeeee;"
|+ align="bottom" style="color:#e76700;" |''Conceptual Input Data for Tree Map Widget''
|-
! width=150 | Node ID
! width=150 | Node Name
! width=150 | Parent Node ID
! width=150 | Value
|-
| 01
| Root One
|
|
|-
| style="background-color:#3BB9FF"|02
| Root Two
|
|
|-
| 03
| SubOneA
| 01
| 10
|-
| 04
| SubOneB
| 01
| 20
|-
| 05
| SubTwoA
| style="background-color:#3BB9FF"|02
| 5
|-
| 06
| SubTwoB
| style="background-color:#3BB9FF"|02
| 15
|-
| style="background-color:#00cd00"|07
| SubTwoC
| style="background-color:#3BB9FF"|02
|
|-
| 08
| SubTwoC-Child1
| style="background-color:#00cd00"|07
| 3
|}

Note that the association called "children" in the above example would need to be defined between "Node ID" and "Node Parent ID". The "Node Name" would be used for the "Label Field" in the Widget, and the "Value" would be used for the "Area Field". The color coding is used to indicate rows that are associated to each other and the fields that establish these associations.

Note that in this example, rows which are referenced by other rows as parents do not contain values in the Area Field ("Value") column. If the parent nodes did include values to be counted towards the total for that node, then the "Area Rollup = Include Parent Area" flag should be enabled in the Widget configuration panel.

== Sample Data ==

Perform the following steps to create a Tree Map Widget using sample data provided with Appboard:

=== Create a Data Source ===
# Log in to AppBoard Builder as an administrator.
# In the Builder Modes panel, select Data Sources.
# Click the "Add" button in the bottom toolbar. The "Create New Data Source" dialog is displayed.
# Type in the name "Sample.TreeMap".
# Select the "File" category for the adapter type, then choose "CSV File".
# Click the "Add Data Source" button in the bottom toolbar.
# The "CSV File" Data Source Wizard is displayed.

=== Configure the Data Source ===
# For the File Path, enter <tt>${application.home}/data/pkg/appboard/tutorial/TreeMapData.csv</tt>.
# Click "Next" in the bottom toolbar.
# On the "Explore" step, click "Next".
# On the "Associate" step, click "Add Association".
## For "Add Field", enter "children". This is the name the Tree Map Widget uses to determine associations.
## Use the "Select Entity" drop-downs to set an association of "sample.TreeMap.TreeMapData.Network_ID" = "sample.TreeMap.TreeMapData.Parent_ID"
# Click "Finish".

=== Configure the Widget ===
# For the Data Collection, select "sample.TreeMap.TreeMapData"
# For the Label Field, select "Location"
# For the Area Field, select "Outages"
# Add a Color Filter called "Outages and Locations"
## Select "Add Color" six times to add six rows
## For the first rule, select the red color and set the rule to be "Color" "=" "Red"
## Repeat the same step for the colors green, gray, blue, white, and brown
## Click "X" to close the Color Filter editor
# Select "Configure" under "Data Tips" and check the boxes for "ID", "Location", and "Outages"

The completed Widget should provide a display similar to the following:

[[Image:TreeMapSample.png|thumb|center|700px|Tree Map Widget Using Sample Data]]

Note that the data in the West and South regions provides a deeper branching of detail than the data in the East and North regions.