Markup and Scripting

The HTML markup for a wijtreemap widget looks like this.

Markup	Copy Code
<div id="treemap" style="width: 800px; height: 400px;"></div>

You can initialize and add data to the widget with the following jQuery script.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijtreemap"], function () { $(document).ready(function () { $("#treemap").wijtreemap({ showTooltip: true, maxColor: "#99FF66", minColor: "#FF6666", midColor: "#66FFFF", maxColorValue: 30, minColorValue: 15, midColorValue: 25, data: [{ label: "World", value: 100, items: [{ label: "Continent A", value: 70, minColor: "#D1A3FF", maxColor: "#3399FF", midColor: "#9494FF", items: [{ label: "Country A.1", value: 40, items: [{ label: "State A.1.1", value: 10 }, { label: "State A.1.2", value: 15 }, { label: "State A.1.3", value: 15 }] }, { label: "Country A.2", value: 30, items: [{ label: "State A.2.1", value: 20 }, { label: "State A.2.2", value: 10 }] }] }, { label: "Continent B", value: 30, minColor: "#D1A3FF", maxColor: "#3399FF", midColor: "#9494FF", items: [{ label: "Country B.1", value: 18, items: [{ label: "State B.1.1", value: 10 }, { label: "State B.1.2", value: 8 }] }, { label: "Country B.2", value: 12, items: [{ label: "State B.2.1", value: 7 }, { label: "State B.2.2", value: 5 }] }] }] }], labelFormatter: function () { return this.label; } }); }); }) </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijtreemap"], function () {
        $(document).ready(function () {          
            $("#treemap").wijtreemap({     
            showTooltip: true,
            maxColor: "#99FF66",
            minColor: "#FF6666",
            midColor: "#66FFFF",
            maxColorValue: 30,
            minColorValue: 15,
            midColorValue: 25,
            data: [{
                label: "World",
                value: 100,
                items: [{

                    label: "Continent A",
                    value: 70,
                    minColor: "#D1A3FF",
                    maxColor: "#3399FF",
                    midColor: "#9494FF",
                    items: [{
                        label: "Country A.1",
                        value: 40,
                        items: [{
                            label: "State A.1.1",
                            value: 10
                        }, {
                            label: "State A.1.2",
                            value: 15
                        }, {
                            label: "State A.1.3",
                            value: 15
                        }]
                    }, {
                        label: "Country A.2",
                        value: 30,
                        items: [{
                            label: "State A.2.1",
                            value: 20
                        }, {
                            label: "State A.2.2",
                            value: 10
                        }]
                    }]
                }, {
                    label: "Continent B",
                    value: 30,
                    minColor: "#D1A3FF",
                    maxColor: "#3399FF",
                    midColor: "#9494FF",
                    items: [{
                        label: "Country B.1",
                        value: 18,
                        items: [{
                            label: "State B.1.1",
                            value: 10
                        }, {
                            label: "State B.1.2",
                            value: 8
                        }]
                    }, {
                        label: "Country B.2",
                        value: 12,
                        items: [{
                            label: "State B.2.1",
                            value: 7
                        }, {
                            label: "State B.2.2",
                            value: 5
                        }]
                    }]
                }]
            }],
            labelFormatter: function () {
                return this.label;
            }
        });
    }); })
    </script>

The markup and script featured here results in the following live widget. Click a region to go to child level and right click to return back to parent level.

Reference

wijtreemap