Platforms to show: All Mac Windows Linux Cross-Platform
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/treemapcolors
This example is the version from Fri, 9th Feb 2023.
Project "treemapcolors.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 3 nodes.
Dim allRegions() As String = Array("Alpha", "Beta", "Gamma")
// Each first level node branches to become 7 second level nodes.
Dim energy_types() As String = Array("Coal", "Oil", "Gas", "Nuclear", "Hydro", "Solar", "Wind")
Dim energy_types_size as Integer = energy_types.Ubound + 1
// Colors for the second level nodes.
Dim colors() As Integer = Array(CType(&h222222, Integer), &h666666, &h884488, &hcc0000, &h3366cc, &h33cc33, &h77bbff)
// The data for the 3 groups of second level nodes
Dim region0() As Double = Array(0.0, 50, 70, 0, 60, 120, 140)
Dim region1() As Double = Array(200.0, 50, 30, 65, 60, 40, 40)
Dim region2() As Double = Array(0.0, 100, 70, 100, 60, 35, 40)
// Create a Tree Map object of size 600 x 520 pixels
Dim c As New CDTreeMapChartMBS(600, 520)
// Add a title to the chart
Call c.addTitle("Energy Usage by Region", "Arial Bold Italic", 18)
// Set the plotarea at (10, 35) and of size 480 x 480 pixels
c.setPlotArea(10, 35, 480, 480)
// 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 emptyArray() as double
root.setData(emptyArray, allRegions)
// Add second level nodes to each of the first level node
root.Node(0).setData(region0, energy_types, colors)
root.Node(1).setData(region1, energy_types, colors)
root.Node(2).setData(region2, energy_types, colors)
// 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}", "Arial Bold", 18, &h77ffffff, CDBaseChartMBS.kTopLeft)
// Set the border color to white (ffffff). Use 2 pixel thick flat border style.
nodeConfig.setColors(-1, &hffffff, CDBaseChartMBS.flatBorder(2))
// 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}MW", "Arial Bold", 8, &hffffff, CDBaseChartMBS.kCenter)
// Set the border color to white (ffffff)
nodeConfig2.setColors(-1, &hffffff)
// Add a legend box at (500, 35) with 12pt Arial font and transparent background and border.
Dim b As CDLegendBoxMBS = c.addLegend(500, 35, True, "Arial", 12)
b.setBackground(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTransparent)
// Add the legend keys for the colors
For i As Integer = 0 To energy_types_size - 1
b.addKey(energy_types(i), colors(i))
Next
// 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.