Kendo Pie Chart with Link

3 posts, 1 answers
  1. StuartLittle
    StuartLittle avatar
    11 posts
    Member since:
    Apr 2018

    Posted 01 May Link to this post

    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. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 03 May Link to this post

    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.
  3. StuartLittle
    StuartLittle avatar
    11 posts
    Member since:
    Apr 2018

    Posted 03 May in reply to Tsvetina Link to this post

    Thanks a lot. It works.
Back to Top