Value label for linear gauge

8 posts, 0 answers
  1. Alex
    Alex avatar
    3 posts
    Member since:
    Feb 2012

    Posted 11 Apr 2012 Link to this post

    Hello everyone,

    We implement linear gauges with the arrow pointer in our application.  I was wondering if there is a way to display an actual label next to the pointer, which would show the value?  Please see the attached image.

    Also, had a question about scaling the size of the linear gauge.  It looks like the background of the gauge is an actual image.  If we would like to scale down the size of the entire gauge to adjust to the size of its outer container, what method would you recommend for that?

    Thank you for your help.
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 16 Apr 2012 Link to this post

    Hello Alex,

    This feature is currently unsupported, and we might consider it for implementation if you log it on uservoice.

    Until it gets implemented, you can show the current value of the gauge in a HTML element beside it, like so:

    <div id="gauge1">
       <div class="gauge"></div>
       <div class="gauge-value">0</div>
    </div>

    <script>
    function setGaugeValue(gaugeId, value) {
        $(gaugeId)
            .find(".gauge-value").text(value).end() 
            .find(".gauge").data("kendoGauge").value(value);
    }
    </script>
    <style>
        .gauge, .gauge-value {
            display: inline-block;
            *display: inline; 
            zoom: 1;
            vertical-align: middle;
        }
    </style>

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 16 Apr 2012 Link to this post

    Hello Alex,

    I am sorry, for I didn't answer your second question. If I understand it right, you need a scalable container for the gauge? If so, it is advisable to use CSS3 gradients and shadows instead of an image, because they will fit any container you need.

    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Felipe
    Felipe avatar
    13 posts
    Member since:
    Jun 2011

    Posted 14 May 2012 Link to this post

    Hello Alex:

    Can you please give me an example on how to position the div with the custom value exactly on top of the selected value?

    Just as my awezome picture shows (:P)

    Thanks!
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 May 2012 Link to this post

    Hello Felipe,

    We don't have an API for that, but you may look at the source code of the chart and see how the Tooltip class is used -- albeit currently unsupported, this may lead you to a solution in your scenario.

    You can also submit a feature request on uservoice so that we consider implementing the feature for a future release.

    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Felipe
    Felipe avatar
    13 posts
    Member since:
    Jun 2011

    Posted 15 May 2012 Link to this post

    Thanks for your repply Alex, I will take a look at the code to see if I can get to something.

    I tried to submit a new feature this afternoon (monday) and it was rejected, the page showed me a message saying I was unauthorized, what could I be doing wrong?
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 May 2012 Link to this post

    Hello Felipe,

    I assume that you need to be logged in to post an issue. Or it may be a temporary problem with the uservoice platform...?

    Greetings,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Felipe
    Felipe avatar
    13 posts
    Member since:
    Jun 2011

    Posted 15 May 2012 Link to this post

    Hello Alex:

    As far as I know I was logged in with my Google Account. I'll maybe try to submit it later!

    Thanks for everything!
Back to Top
Kendo UI is VS 2017 Ready