Adding title / legend for RadialGauge

7 posts, 0 answers
  1. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 05 Sep 2018 Link to this post

    Hello. Is there a possibility to add a Title or Legend inside the @(Html.Kendo().RadialGauge() )? By trying .title or .legend nothing appears. In the demo's there arent titles nor legends. 

     

    Regards.

  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Sep 2018 Link to this post

    Hi,

    For the time being the RadialGauge component does not provide pointers legend or title functionality. Can you please submit your feature request and vote in the Kendo Uservoice portal at: Radial/Linear gauges.
     
    Thank you!

    Regards,
    Rumen
    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. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 05 Sep 2018 in reply to Rumen Link to this post

    Dear Rumen, When I want to vote. My IP gets saved and I dont want that. So i can not vote.
  4. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 05 Sep 2018 Link to this post

    Also, is there a possibility to put a border around the gauge like in the picture. It is something with gaugeArea (if im not mistaken). The documentation is very bad
  5. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Sep 2018 Link to this post

    Hi there,

    I will pass your request and vote to the Product Manager. Thank you!

    As for the new question, there are two approaches to achieve the goal:
    • Add a background image under the gauge wrapper as it is made in the Scale options demo (screenshot)
    • or use the built-in API of the Gauge to increase the Scale -> RangeSize.


      var gauge = $("#radialGauge").data("kendoRadialGauge");
      var opts = gauge.options;
      opts.scale = opts.scale || {};
      opts.scale.rangeSize = 50;
      gauge.setOptions(opts);
      gauge.redraw();

     


    Best regards,
    Rumen
    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.
  6. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 05 Sep 2018 in reply to Rumen Link to this post

    Dear Rumen,

    By using an image will it take a lot of time to scale it correctly.

    In my code I have: 
    .Scale(scale => scale
                .RangeSize(50)

    )

    By using rangeSize it only *increases* the width of ranges not the actual border. Maybe this idea could be a feature to add
    .Scale(scale => scale
                .Border(number of pixels).Color("color")
    )

    If I am correct I also cant add a 'border' between the ranges. So you can get a better view from where a range ends.

    Kind regards.

     

  7. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Sep 2018 Link to this post

    The requested border feature is currently not available in the component and I proposed two workarounds for achieving closer results.

    The image background requires  to find or draw your own image and to properly position it under the gauge. 
    The RangeSize option allows you to increase the range, but does not draw a top border. Yes, this could be a feature request.

    You can see what is available as an API from the base Kendo UI RadialGauge widget in the Kendo UI documentation - https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge#methods.

    Regards,
    Rumen
    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.
Back to Top