Radial Gauge blanks out when i try to change label position from outside to inside

3 posts, 0 answers
  1. Morne
    Morne avatar
    3 posts
    Member since:
    Oct 2012

    Posted 23 Oct 2012 Link to this post

    Hi,

    I have a radial gauge and it is working fine, but as soon as i add the following it goes completely blank when i run the code.

    labels: {
                                    position: labelPosition || "inside"
                                },
    If i remove this code it works again.
    Any ideas?

    Here is the complete function for reference.

            function createGauges() {
                var theme = $(document).data("kendoSkin") || "default";
    //                        value = $("#gauge-value").val();


                        $("#Lgauge").kendoRadialGauge({
                            theme: theme,


                            pointer: {
                                value: 80
                            },


                            scale: {
                                majorUnit: 10,
                                minorUnit: 2,
                                min: 0,
                                max: 100,
                                labels: {
                                    position: labelPosition || "inside"
                                },
                           
                                ranges: [
                                    {
                                        from: 0,
                                        to: 35,
                                        color: "red"
                                    }, {
                                        from: 35,
                                        to: 70,
                                        color: "yellow"
                                    }, {
                                        from: 70,
                                        to: 100,
                                        color: "green"
                                    }
                                ]
                            }
                        });
                    }

    And here is the only styling i apply to the div :

                div#gaugeLCon {
                        background: transparent url("../images/gauge-container-partial.png") no-repeat 50% 50%;
                        width: 386px;
                        height: 386px;
                        text-align: center;
                        margin: 0 0 30px 50px;
                        }                  
              
                 div#Lgauge
              {
                  
                  width: 330px;
                  height: 310px;  
                  text-align: center;
                  margin: 0 auto 0;
              }

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 Oct 2012 Link to this post

    Hello Morne,

    Are you getting any JavaScript errors in the web page?

    All the best,
    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. Morne
    Morne avatar
    3 posts
    Member since:
    Oct 2012

    Posted 23 Oct 2012 Link to this post

    Hi Alex,

    Yes.

    Here is the error.

    Uncaught ReferenceError: labelPosition is not defined


    Regards,
    Morne

    UPDATE :

    Alex, I have resolved the issue.
    All i needed to do was remove "labelPosition ||"

    Thanks for the help.

    Morne
Back to Top