How to add Custom Labels at specific ticks(Scale vale) in Radial Gauge chart?

12 posts, 0 answers
  1. prabhakar
    prabhakar avatar
    11 posts
    Member since:
    Sep 2013

    Posted 20 Sep 2013 Link to this post


    I have Gauge chart with pointer value  3 as shown in attached screen shot. Now how to add custom label at  3
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Sep 2013 Link to this post

    Hello Prabhakar,

    In order to achieve this you could use scale.labels.template. For example:

    $("#gauge").kendoRadialGauge({
      //....
      scale: {
          labels: {
              template: "#=customLabels(value)#"
          }
      }
    });
     
    function customLabels(value){
      if (value == 3){
        return "Custom Label"
      }
    }
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. prabhakar
    prabhakar avatar
    11 posts
    Member since:
    Sep 2013

    Posted 23 Sep 2013 Link to this post

    Thanks for your support...I am bale to render custom labels now.
    I need below help for the same requirement.

    How to show labels for every Minor Unit in Gauge Chart?
  4. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 24 Sep 2013 Link to this post

    Hi Prabhakar,

    You can't render labels for the minor ticks but you can change the major unit to be equal to the minor unit then you will have labels for all ticks.

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. prabhakar
    prabhakar avatar
    11 posts
    Member since:
    Sep 2013

    Posted 24 Sep 2013 Link to this post

    How to increase the size (Thickness) of the ranges bar in Gauge chart?
    I am not able to set rangeSize for scale in razor.
  6. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 26 Sep 2013 Link to this post

    Hello plabhakar,

    1) You can change the scale.majorUnit in order to change the distance between ticks.
    2) You can set the rangeSize with: 

    .Scale(scale => scale
        .RangeSize(20)
    )

    I hope this helps.

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. prabhakar
    prabhakar avatar
    11 posts
    Member since:
    Sep 2013

    Posted 26 Sep 2013 Link to this post

    I have already tried above code...it is throwing compilation error.
    Please see attached screen shot for Error.
  8. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 30 Sep 2013 Link to this post

    Hi prabhakar,

    I tried to reproduce the problem - to no avail. I am sending my test project for your reference. Could you please examine it and try to reproduce the problem?

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. prabhakar
    prabhakar avatar
    11 posts
    Member since:
    Sep 2013

    Posted 01 Oct 2013 Link to this post

    Please see attached screen shot for Kendo Mvc Version I have been using.
  10. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 03 Oct 2013 Link to this post

    Hello probhakar,

    You are right. This property is added with the SP1 of Kendo UI. Could you please update to the SP1 of Kendo UI in order to use this property?

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. prabhakar
    prabhakar avatar
    11 posts
    Member since:
    Sep 2013

    Posted 03 Oct 2013 Link to this post

    I am using trial version so can you please send me Kendo UI SP1 download link?
  12. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 03 Oct 2013 Link to this post

    Hello prabhakar,

    You can download the SP1 of Kendo UI from Home / Your Products / Trial Download List.

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top