CODEWITHSUNDEEP
javascriptanychart
Sahil Agarwal
Sahil Agarwal

Reputation: 99

How to get last level element on click anychart sunburst

How can I get last level element clicked on anychart sunburst chart. I can get inner levels by using chart.getDrilldownPath(), but not able to identify the how to get last level. below is my code sample

  <html>
  <body>
    <div id="container"></div>

    <script>
      anychart.onDocumentReady(function () {
        // create data
        var data = [
          {
            name: "Company A",
            children: [
              {
                name: "Technical",
                children: [
                  { name: "Team Leaders" },
                  { name: "Architects" },
                  { name: "Developers" },
                  { name: "Testers" },
                ],
              },
              {
                name: "Sales",
                children: [{ name: "Analysts" }, { name: "Executives" }],
              },
              { name: "HR" },
              { name: "Management" },
            ],
          },
        ];

        // create a chart and set the data
        var chart = anychart.sunburst(data, "as-tree");

        // set the calculation mode
        chart.calculationMode("ordinal-from-root");

        // set the chart title
        chart.title().useHtml(true);
        chart.title(
          "Sunburst: Calculation Mode (ordinal-from-root)<br><br>" +
            "<span style='font-size:12; font-style:italic'>" +
            "Corporate Structure</span>"
        );
        chart.listen('chartDraw', function () {
          printPath(chart.getDrilldownPath());
        });

        // set the container id
        chart.container("container");

        // initiate drawing the chart
        chart.draw();
      });

    </script>
  </body>
</html>

There is a click listen event available, but I am unable to identify which element was clicked.

Upvotes: 2

Views: 118

Answers (1)

Badacadabra
Badacadabra

Reputation: 8497

If you listen to pointClick events and disable the selection mode, you can identify the right element each time you click:

chart.listen("pointClick", function (e) {
  console.log(e.point.getIndex(), e.point.get("name"));
});
      
chart.interactivity().selectionMode("none");

Here is your snippet, to which I added the code above:

anychart.onDocumentReady(function () {
  // create data
  var data = [
    {
      name: "Company A",
      children: [
        {
          name: "Technical",
          children: [
            { name: "Team Leaders" },
            { name: "Architects" },
            { name: "Developers" },
            { name: "Testers" },
          ],
        },
        {
          name: "Sales",
          children: [{ name: "Analysts" }, { name: "Executives" }],
        },
        { name: "HR" },
        { name: "Management" },
      ],
    },
  ];

  // create a chart and set the data
  var chart = anychart.sunburst(data, "as-tree");

  // set the calculation mode
  chart.calculationMode("ordinal-from-root");

  // set the chart title
  chart.title().useHtml(true);
  chart.title(
    "Sunburst: Calculation Mode (ordinal-from-root)<br><br>" +
    "<span style='font-size:12; font-style:italic'>" +
    "Corporate Structure</span>"
  );
  /* chart.listen('chartDraw', function () {
    console.log(chart.getDrilldownPath());
  }); */
  
  // ========================= HERE =========================
  chart.listen("pointClick", function (e) {
    console.log(e.point.getIndex(), e.point.get("name"));
  });
  
  chart.interactivity().selectionMode("none");
  // ==================================================

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
});
#container {
  width: 100%;
  height: 350px;
}
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-sunburst.min.js"></script>

<div id="container"></div>

Upvotes: 1

Related Questions