Drill Down Functionality

[Jud]

Hi Telerik team,

Do Kendu UI charts provide drill down functionality? Like, say, I want the user to redirect to another page as a result of clicking on area of a chart to show more details? If yes, then how?

Thanks in advance.

[Atanas Korchev]

Hi,

 Drill-down functionality is not supported out of the box yet. However the chart exposes a seriesClick event which can be used instead. You can find a live demo here.

All the best,
Atanas Korchev
the Telerik team

[Sam]

Hi Atanas ,

I've copied and pasted the onSeriesClick function that is displayed on the demo and for some reason it doesn't work, (code pasted below) any ideas?

<script type="text/javascript">
            function createChart() {
                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Project Management"
                    },
                    legend: {
                        position: "bottom"
                    },
                    seriesDefaults: {
                        labels: {
                            template: "#= kendo.format('{0:P}', percentage)#",
                            visible: true
                        }
                    },
                    series: [{
                        type: "pie",
                        data: [{
                            category: "Quality",
                            value: 80
                        }, {
                            category: "Time",
                            value: 80
                        }, {
                            category: "Cost",
                            value: 80
                        }]
                    }],
                    tooltip: {
                        visible: true,
                        template: "#= kendo.format('{0:P}', percentage)#"
                    }
                });
            }

            function onSeriesClick(e) {
                alert("Clicked value: " + e.value);
            }

            $(document).ready(function () {
                setTimeout(function () {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();


                    $("#example").bind("kendo:skinChange", function (e) {
                        createChart();
                    });
                }, 400);


                $(".configuration").bind("change", refresh);
            });


            function refresh() {
                var chart = $("#chart").data("kendoChart"),
                        pieSeries = chart.options.series[0],
                        labels = $("#labels").prop("checked"),
                        alignInputs = $("input[name='alignType']"),
                        alignLabels = alignInputs.filter(":checked").val();

                chart.options.transitions = false;
                pieSeries.labels.visible = labels;
                pieSeries.labels.align = alignLabels;


                alignInputs.attr("disabled", !labels);


                chart.refresh();
            }
            
        </script>