BCT Sunburst Chart 12 | samples | Documentation

HTMLcopy

 
<label><input onclick="sortingMode('none')" type="radio" name="mode" checked>No Sorting</label>
<label><input onclick="sortingMode('asc')" type="radio" name="mode">Ascending</label> 
<label><input onclick="sortingMode('desc')" type="radio" name="mode">Descending</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: "Company A", children: [
        {name: "Technical", children: [
          {name: "Team Leaders", value: 7},
          {name: "Architects", value: 3},
          {name: "Developers", value: 35},
          {name: "Testers", value: 15}
        ]},
        {name: "Sales", children: [
          {name: "Analysts", value: 12},
          {name: "Executives", value: 8}
        ]},
        {name: "HR", value: 3},
        {name: "Management", value: 7}
      ]}
    ];
​
    // create a chart and set the data
    chart = anychart.sunburst(data, "as-tree");
​
    // set the calculation mode
    chart.calculationMode("parent-independent");
​
    // set the chart title
    chart.title().useHtml(true);
    chart.listen("chartDraw", function () {
      chart.title("Sunburst: Sorting Order = " +
                  chart.sort() + "<br><br>" + 
                  "<span style='font-size:12; font-style:italic'>" +
                  "Number of Employees</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