Kendo Pie Chart with Link

[StuartLittle]

Hi,

I would like users to direct to new pages/controllers when they click on different pieces of pie chart.

I found something similar https://www.telerik.com/forums/pie-chart-with-link but its related to RadCharts and not Kendo.

Can you please provide a code snippet or link to docs.

I tried using parameter like url but that didnt work.

 @(Html.Kendo().Chart()
                            .Name("chart")
                            .Title("Big Players")
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Bottom)
                            )
                            .Series(series =>
                            {
                                series.Pie(new dynamic[] {
new {category = "Apple",value = 40.3, color = "#ff3d00", url = "https://www.apple.com"},
new {category = "Microsoft",value = 0.4, color = "#f3e5f5", url = "https://www.microsoft.com"},
new {category = "IBM",value = 40.6, color = "#304ffe", url = "https://www.ibm.com"}

})
                                .Labels(labels => labels
                                    .Visible(true)
                                    .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
                                );
                            }))

 

Thank you

[Tsvetina]

Hello,

You can use the SeriesClick event to detect when a pie segment has been clicked and navigate to a url stored in its data item:

    @(Html.Kendo().Chart()
     .Name("chart")
     .Title("Big Players")
     .Legend(legend => legend
         .Position(ChartLegendPosition.Bottom)
     )
     .Series(series =>
     {
         series.Pie(new dynamic[] {
             new {category = "Apple",value = 40.3, color = "#ff3d00", url = "https://www.apple.com"},
             new {category = "Microsoft",value = 0.4, color = "#f3e5f5", url = "https://www.microsoft.com"},
             new {category = "IBM",value = 40.6, color = "#304ffe", url = "https://www.ibm.com"}

         })
         .Labels(labels => labels
             .Visible(true)
             .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
         );
     })
     .Events(e=>e.SeriesClick("onSeriesClick"))
     )

<script>
    function onSeriesClick(e) {
        var url = e.dataItem.url;
        window.location.href = url;
    }
</script>

Regards,
Tsvetina
Progress Telerik

[StuartLittle]

Thanks a lot. It works.