how to implement server side drilldown for treemap

[baladithyanandam]

Hello,

Chart: treemap

Scenario: If user side tries to drilldown from parent I have to get the children data from server in click event.

Can you please provide a working example to get the data and update the children while drilldown.

Thank you.

[andrzej.b]

Hi,

Welcome to our forum and thanks for contacting us with your question!

Combining fetching with drilldown is perfectly possible in Higcharts. You can take advantage of the point.event.click listener, and fetch the data for drill down when needed.

The basic structure would be similar to this mock code:

Code: Select all

Highcharts.getJSON('data/initialData.json', function (data) {
    Highcharts.mapChart('container', {
        series: [{
            type: 'treemap',
            data: data,
            point: {
                events: {
                    click: function () {
                        // Fetch the children data from the server
                        fetchChildrenData(this.name);
                    }
                }
            }
        }],
        drilldown: {
            series: [] // Initially empty, will be filled on fetch
        }
    });
});

function fetchChildrenData(parentName) {
    // Example AJAX request to fetch children data based on parent name
    fetch(`data/childrenData.json?parent=${parentName}`)
        .then(response => response.json())
        .then(childrenData => {
            // Update the chart with the new data
            const drilldownSeries = {
                    id: `${parentName}`,
                    data: childrenData
                };
            const chart = Highcharts.charts[0]; // Assuming there's only one chart
            chart.addSeriesAsDrilldown(chart.series[0].points.find(point => point.name === parentName), drilldownSeries)
        })
        .catch(error => console.error('Error fetching children data:', error));
}

I also prepared for you a sample demo mocking drilldown and fetch, I hope you will find it useful: https://jsfiddle.net/BlackLabel/cgexonsy/

If you have further inquiries, you may reach out to me at any time.

Best regards,

[baladithyanandam]

Hello, thanks for the fiddle.

1. What if I have multiple levels of data? I need to get the child data as well.
2. I want to hide the child blocks in the parent level when drilldown is enabled.

Please help me with this fiddle: https://jsfiddle.net/c3uzkhtp/34/

[andrzej.b]

Hi,

Ad 1) You can handle multiple levels by recursively fetching data for each drilldown event. Each time a user drills down, fetch the next level of data from the server and use chart.addSeriesAsDrilldown() to add it to the chart.
Ad 2) You don't need to do anything extra to hide other child blocks at the parent level. This behaviour is inherent in the drilldown functionality with allowTraversingTree set to 'true'.

I implemented point 1 here, please use it to produce your own solution for your use case: https://jsfiddle.net/BlackLabel/8uhx6j1f/

Feel free to reach out if you have any further questions.

Kind regards,