Example: /ChartDirector/multileveltreemaplayout

Online Documentation   -   Statistics   -   FAQ   -   Plugin Parts (All, Dependencies)   -   Class hierarchy

New in Version 22.2 22.3 22.4 22.5 23.0 23.1 23.2 23.3 23.4 23.5 24.0 24.1

The list of the   topics,   classes,   interfaces,   controls,   modules,   global methods by category,   global methods by name,   screenshots,   licenses   and   examples.

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/multileveltreemaplayout


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/multileveltreemaplayout

This example is the version from Fri, 9th Feb 2023.

Project "multileveltreemaplayout.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Delete"
Const kFileQuit = "&Quit"
Const kFileQuitShortcut = ""
EventHandler Sub Open() For i As Integer = 0 To 5 createChart i Next End EventHandler
Sub createChart(chartIndex as integer) // The first level nodes of the tree map. There are 4 nodes. Dim names() As String = Array("A", "B", "C", "D") // Use random numbers for second level nodes Dim r As New CDRanSeriesMBS(11 + chartIndex) Dim series0() As Double = r.getSeries(6, 10, 100) Dim series1() As Double = r.getSeries(6, 10, 100) Dim series2() As Double = r.getSeries(6, 10, 100) Dim series3() As Double = r.getSeries(6, 10, 100) // Colors for second level nodes Dim colors0() As Integer = Array(CType(&hddeedd, Integer), &hbbeebb, &h99ee99, &h77ee77, &h55ee55, &h33ee33) Dim colors1() As Integer = Array(CType(&hffeedd, Integer), &hffddbb, &hffcc99, &hffbb77, &hffaa55, &hff9933) Dim colors2() As Integer = Array(CType(&hddeeff, Integer), &hbbddff, &h99ccee, &h77bbee, &h55aadd, &h3399dd) Dim colors3() As Integer = Array(CType(&hffeeff, Integer), &heeccee, &hddaadd, &hcc88cc, &hbb66bb, &haa44aa) // Create a Tree Map object of size 400 x 380 pixels Dim c As New CDTreeMapChartMBS(400, 380) // Set the plotarea at (10, 35) and of size 380 x 300 pixels c.setPlotArea(10, 35, 380, 300) // 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, names) Dim emptyString() As String // Add second level nodes to each of the first level node root.Node(0).setData(series0, emptyString, colors0) root.Node(1).setData(series1, emptyString, colors1) root.Node(2).setData(series2, emptyString, colors2) root.Node(3).setData(series3, emptyString, colors3) // Get the prototype (template) for the first level nodes. Dim nodeConfig As CDTreeMapNodeMBS = c.getLevelPrototype(1) // Hide the first level node cell border by setting its color to transparent nodeConfig.setColors(-1, CDBaseChartMBS.kTransparent) // Get the prototype (template) for the second level nodes. Dim nodeConfig2 As CDTreeMapNodeMBS = c.getLevelPrototype(2) // Set the label format for the nodes to include the parent node's label and index of the second // level node. Use semi-transparent black (3f000000) Arial Bold font and put the label at the // center of the cell. nodeConfig2.setLabelFormat("{parent.label}{index}", "Arial Bold", 8, &h3f000000, CDBaseChartMBS.kCenter) // Set the second level node cell border to white (ffffff) nodeConfig2.setColors(-1, &hffffff) If (chartIndex = 0) Then // Squarify (default) - Layout the cells so that they are as square as possible. Call c.addTitle("Squarify", "Arial Bold", 15) Elseif (chartIndex = 1) Then // Slice and Dice - First level cells flow horizontally. Second level cells flow vertically. // (The setLayoutMethod also supports other flow directions.) Call c.addTitle("Slice and Dice", "Arial Bold", 15) root.setLayoutMethod(CDBaseChartMBS.kTreeMapSliceAndDice) Elseif (chartIndex = 2) Then // Binary Split by Size - Split the cells into left/right groups so that their size are as // close as possible. For each group, split the cells into top/bottom groups using the same // criteria. Continue until each group contains one cell. (The setLayoutMethod also supports // other flow directions.) Call c.addTitle("Binary Split by Size", "Arial Bold", 15) root.setLayoutMethod(CDBaseChartMBS.kTreeMapBinaryBySize) nodeConfig.setLayoutMethod(CDBaseChartMBS.kTreeMapBinaryBySize) Elseif (chartIndex = 3) Then // Layout first level cells using Slice and Dice. Layout second level cells using Binary // Split By Size. Call c.addTitle("Slice and Dice + Binary By Size", "Arial Bold", 15) root.setLayoutMethod(CDBaseChartMBS.kTreeMapSliceAndDice) nodeConfig.setLayoutMethod(CDBaseChartMBS.kTreeMapBinaryBySize) Elseif (chartIndex = 4) Then // Layout first level cells using Slice and Dice. Layout second level cells using Squarify. Call c.addTitle("Slice and Dice + Squarify", "Arial Bold", 15) root.setLayoutMethod(CDBaseChartMBS.kTreeMapSliceAndDice) nodeConfig.setLayoutMethod(CDBaseChartMBS.kTreeMapSquarify) Elseif (chartIndex = 5) Then // Layout first level cells using Binary Split By Size.. Layout second level cells using // Strip. With Strip layout, cells flow from left to right, top to bottom. The number of // cells in each row is such that they will be as close to a square as possible. (The // setLayoutMethod also supports other flow directions.) Call c.addTitle("Binary Split By Size + Strip", "Arial Bold", 15) root.setLayoutMethod(CDBaseChartMBS.kTreeMapBinaryBySize) nodeConfig.setLayoutMethod(CDBaseChartMBS.kTreeMapStrip) End If // 2x for higher DPI displays c.setOutputOptions("bmpscale=2") // Output the chart Dim pic As Picture = c.makeChartPicture Dim w As New MainWindow w.pic = pic End Sub
End Class
Class MainWindow Inherits Window
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.


💬 Ask a question or report a problem