Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/multileveltreemap
Required plugins for this example: MBS ChartDirector Plugin
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/multileveltreemap
This example is the version from Fri, 9th Feb 2023.
Project "multileveltreemap.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Delete"
Const kFileQuit = "&Quit"
Const kFileQuitShortcut = ""
End Class
Class MainWindow Inherits Window
EventHandler Sub Open()
// The first level nodes of the tree map. There are 5 nodes.
Dim animals() As String = Array("Fish", "Amphibian", "Reptile", "Bird", "Mammal")
// In this example, the colors are based on the first level nodes.
Dim colors() As Integer = Array( CType(&hff5555, Integer), &hff9933, &hffff44, &h66ff66, &h44ccff)
// Data for the second level nodes in "Fish"
Dim fish_names() As String = Array("Shark", "Ray", "Swordfish", "Sawfish", "Eel", "Lionfish", "Seahorse")
Dim fish_data() As Double = Array(170.0, 144, 109, 115, 75, 45, 54)
// Data for the second level nodes in "Bird"
Dim bird_names() As String = Array("Swan", "Ostrich", "Eagle", "Penguin", "Kiwi", "Flamingo", "Owl", "Peacock")
Dim bird_data() As Double = Array(89.0, 64, 94, 106, 68, 81, 40, 73)
// Data for the second level nodes in "Amphibian"
Dim amphibian_names() As String = Array("Toad", "Salamander", "Frog", "Caecilian")
Dim amphibian_data() As Double = Array(67.0, 47, 58, 36)
// Data for the second level nodes in "Reptile"
Dim reptile_names() As String = Array("Turtle", "Crocodile", "Lizard", "Snake")
Dim reptile_data() As Double = Array(58.0, 154, 97, 41)
// Data for the second level nodes in "Mammal"
Dim mammal_names() As String = Array("Big Cat", "Primate", "Panda", "Elephant", "Hippo", "Rhino", "Giraffe")
Dim mammal_data() As Double = Array(266.0, 207, 160, 194, 168, 149, 202)
// Create a Tree Map object of size 600 x 600 pixels
Dim c As New CDTreeMapChartMBS(600, 600)
// Add a title to the chart
Call c.addTitle("Animal Kingdom Census", "Arial Bold Italic", 18)
// Set the plotarea at (30, 30) and of size 540 x 540 pixels
c.setPlotArea(30, 30, 540, 540)
// Obtain the root of the tree map, which is the entire plot area
Dim root As CDTreeMapNodeMBS = c.RootNode
// Add first level nodes to the root. We do not need to provide data as they will be computed as
// the sum of the second level nodes.
Dim empty() As Double
root.setData(empty, animals, colors)
// Add second level nodes to each of the first level node
root.Node(0).setData(fish_data, fish_names)
root.Node(1).setData(amphibian_data, amphibian_names)
root.Node(2).setData(reptile_data, reptile_names)
root.Node(3).setData(bird_data, bird_names)
root.Node(4).setData(mammal_data, mammal_names)
// Get the prototype (template) for the first level nodes.
Dim nodeConfig As CDTreeMapNodeMBS = c.getLevelPrototype(1)
// Set the label format for the nodes to show the label with 8pt Arial Bold font in
// semi-transparent black color (&h77000000). Put the text at the top left corner of the cell.
nodeConfig.setLabelFormat("{label}", "Times New Roman Bold Italic", 18, &h77000000, CDBaseChartMBS.kTopLeft)
// Set the border color to white (ffffff)
nodeConfig.setColors(-1, &hffffff)
// Get the prototype (template) for the second level nodes.
Dim nodeConfig2 As CDTreeMapNodeMBS = c.getLevelPrototype(2)
// Set the label format for the nodes to show the label and value with 8pt Arial Bold font. Put
// the text at the center of the cell.
nodeConfig2.setLabelFormat("{label}<*br*>{value}", "Arial Bold", 8, CDBaseChartMBS.kTextColor, CDBaseChartMBS.kCenter)
// Set the border color to white (ffffff)
nodeConfig2.setColors(-1, &hffffff)
// 2x for higher DPI displays
c.setOutputOptions("bmpscale=2")
// Output the chart
pic = c.makeChartPicture
// drawn in paint event
End EventHandler
EventHandler Sub Paint(g As Graphics, areas() As REALbasic.Rect)
If pic <> Nil Then
// scale to window
g.DrawPicture pic, 0, 0, g.Width, g.Height, 0, 0, pic.Width, pic.Height
End If
End EventHandler
Property pic As Picture
End Class
MenuBar MainMenuBar
MenuItem FileMenu = "&File"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Edit"
MenuItem EditUndo = "&Undo"
MenuItem EditSeparator1 = "-"
MenuItem EditCut = "Cu&t"
MenuItem EditCopy = "&Copy"
MenuItem EditPaste = "&Paste"
MenuItem EditClear = "#App.kEditClear"
MenuItem EditSeparator2 = "-"
MenuItem EditSelectAll = "Select &All"
End MenuBar
End Project
The items on this page are in the following plugins: MBS ChartDirector Plugin.