BCT Treemap Chart 04 | samples | Documentation

HTMLcopy

 
<label><input onclick="sortingMode('desc')" type="radio" name="mode" checked>Descending</label>
<label><input onclick="sortingMode('asc')" type="radio" name="mode">Ascending</label> 
<label><input onclick="sortingMode('none')" type="radio" name="mode">No Sorting</label> 
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
#container {
    position: absolute;
    width: 100%;
    top: 35px;
    bottom: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {name:   "European Union", children: [
        {name: "Belgium",        value: 11443830},
        {name: "France",         value: 64938716},
        {name: "Germany",        value: 80636124},
        {name: "Greece",         value: 10892931},
        {name: "Italy",          value: 59797978},
        {name: "Netherlands",    value: 17032845},
        {name: "Poland",         value: 38563573},
        {name: "Romania",        value: 19237513}, 
        {name: "Spain",          value: 46070146},
        {name: "United Kingdom", value: 65511098}  
      ]} 
    ];
​
    // create a chart and set the data
    chart = anychart.treeMap(data, "as-tree");
​
    // set the chart title
    chart.title().useHtml(true);
    chart.listen("chartDraw", function () {
      chart.title("Treemap: Sorting Order = " + chart.sort() +
                  "<br><br><span style='font-size:12; font-style:italic'>" +
                  "Top 10 European Union Countries by Population</span>");
    });
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
});
    
// set the sorting mode
function sortingMode(mode) {
  chart.sort(mode);
}

Sample meta

AnyChart Documentation