Multi Level Tree Map Layout

[Web Version (in ASP)] aspdemo\multileveltreemaplayout.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' This script can draw different charts depending on the chartIndex
Sub createChart(viewer, chartIndex)

    ' The first level nodes of the tree map. There are 4 nodes.
    names = Array("A", "B", "C", "D")

    ' Use random numbers for second level nodes
    Set r = cd.RanSeries(11 + chartIndex)

    series0 = r.getSeries(6, 10, 100)
    series1 = r.getSeries(6, 10, 100)
    series2 = r.getSeries(6, 10, 100)
    series3 = r.getSeries(6, 10, 100)

    ' Colors for second level nodes
    colors0 = Array(&Hddeedd, &Hbbeebb, &H99ee99, &H77ee77, &H55ee55, &H33ee33)
    colors1 = Array(&Hffeedd, &Hffddbb, &Hffcc99, &Hffbb77, &Hffaa55, &Hff9933)
    colors2 = Array(&Hddeeff, &Hbbddff, &H99ccee, &H77bbee, &H55aadd, &H3399dd)
    colors3 = Array(&Hffeeff, &Heeccee, &Hddaadd, &Hcc88cc, &Hbb66bb, &Haa44aa)

    ' Create a Tree Map object of size 400 x 380 pixels
    Set c = cd.TreeMapChart(400, 380)

    ' Set the plotarea at (10, 35) and of size 380 x 300 pixels
    Call c.setPlotArea(10, 35, 380, 300)

    ' Obtain the root of the tree map, which is the entire plot area
    Set root = c.getRootNode()

    ' 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.
    Call root.setData(Empty, names)

    ' Add second level nodes to each of the first level node
    Call root.getNode(0).setData(series0, Empty, colors0)
    Call root.getNode(1).setData(series1, Empty, colors1)
    Call root.getNode(2).setData(series2, Empty, colors2)
    Call root.getNode(3).setData(series3, Empty, colors2)

    ' Get the prototype (template) for the first level nodes.
    Set nodeConfig = c.getLevelPrototype(1)

    ' Hide the first level node cell border by setting its color to transparent
    Call nodeConfig.setColors(-1, cd.Transparent)

    ' Get the prototype (template) for the second level nodes.
    Set nodeConfig2 = 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.
    Call nodeConfig2.setLabelFormat("{parent.label}{index}", "Arial Bold", 8, &H3f000000, _
        cd.Center)

    ' Set the second level node cell border to white (ffffff)
    Call 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)
        Call root.setLayoutMethod(cd.TreeMapSliceAndDice)
    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)
        Call root.setLayoutMethod(cd.TreeMapBinaryBySize)
        Call nodeConfig.setLayoutMethod(cd.TreeMapBinaryBySize)
    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)
        Call root.setLayoutMethod(cd.TreeMapSliceAndDice)
        Call nodeConfig.setLayoutMethod(cd.TreeMapBinaryBySize)
    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)
        Call root.setLayoutMethod(cd.TreeMapSliceAndDice)
        Call nodeConfig.setLayoutMethod(cd.TreeMapSquarify)
    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)
        Call root.setLayoutMethod(cd.TreeMapBinaryBySize)
        Call nodeConfig.setLayoutMethod(cd.TreeMapStrip)
    End If

    ' Output the chart
    Call viewer.setChart(c, cd.SVG)

    ' Include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("", "", "title='<*cdml*>{parent.label}{index}: {value|2}'")
End Sub

' This example includes 6 charts
Dim viewers(5)
For i = 0 To Ubound(viewers)
    Set viewers(i) = cd.WebChartViewer(Request, "chart" & i)
    Call createChart(viewers(i), i)
Next
%>

<!DOCTYPE html>
<html>
<head>
    <title>Multi Level Tree Map Layout</title>
    <!-- Include ChartDirector Javascript Library to support chart interactions -->
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        Multi Level Tree Map Layout
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div style="font:10pt verdana; margin-bottom:1.5em">
        <a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a>
    </div>
    <!-- ****** Here are the chart images ****** -->
    <%
        For i = 0 To Ubound(viewers)
            Call Response.Write(viewers(i).renderHTML())
            Call Response.Write(" ")
        Next
    %>
</body>
</html>