This is a migrated thread and some comments may be shown as answers.

Kendo Pie Chart with Link

2 Answers 229 Views
Chart
This is a migrated thread and some comments may be shown as answers.
StuartLittle
Top achievements
Rank 1
StuartLittle asked on 01 May 2019, 12:49 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 03 May 2019, 06:52 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
StuartLittle
Top achievements
Rank 1
answered on 03 May 2019, 05:51 PM
Thanks a lot. It works.
Tags
Chart
Asked by
StuartLittle
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
StuartLittle
Top achievements
Rank 1
Share this question
or