We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Linear Gauge Control axe labels

Hi, 

I'm having some issue changing the range increments on the Linear gauge control, 
the default of ten is fine for short ranges . however for ranges in the 1000's get to busy to read.
                                                     
so if you can point me at a tutorial or provided a sample that would be great 


2 Replies

MS Matthew Shakespeare August 12, 2015 10:21 AM UTC

Think I've reached a solution myself looking through your javascript documentation 

the option I was looking for was  minorIntervalValue:25,

He it is within the rest of the code for context, taken from your example

$("#LinearGauge1").ejLinearGauge({
            enableAnimation: false,
            frame: { backgroundImageUrl: "../images/gauge/Gauge_linear_light.png" },
            scales: [{
                //For Adding scale width
                width: 18,
                //For Adding scale minimum value
                minimum:10,
                //For Adding scale maximum value
                maximum:210,
                //For Adding scale minor interval value
                minorIntervalValue:25,
                //For Adding scale major interval value
                majorIntervalValue:50,
                //For Adding scale direction
                direction: "counterclockwise",
                position: { x: 20, y: 50 },
                backgroundColor: "Grey",
                border: { color: "Grey", width: 1 },
                showMarkerPointers: true, showBarPointers: false,
                //Adding label collection
                labels: [{ distanceFromScale: { x: 50, y: 0 } }],
                //Adding marker pointer collection
                markerPointers: [{
                    type: "pentagon", placement: "near",
                    length: 10, width: 20, distanceFromScale: 20,
                    backgroundColor: "#FE8282"
                }],
                //Adding tick collection
                ticks: [{
                    type: "majorinterval", width: 2,
                    color: "#8c8c8c", distanceFromScale: { x: 30, y: 0 }
                },
                {
                    type: "minorinterval", width: 1, height: 6,
                    color: "#8c8c8c", distanceFromScale: { x: 30, y: 0 }
                }]
            }]
        });
    });




SK Sanjith Kesavan Syncfusion Team August 12, 2015 11:50 AM UTC

Hi Matthew Shakespeare,
Sorry for the delay. Since the image provided by you was broken we were analyzing what might be your requirement.
We are glad that you found the solution what you are looking for.

For more details about the linear gauge please find the below link
Link: https://help.syncfusion.com/lightswitch/html-client/lightswitch-for-html-client

You can also find the sample of the linear gauge from below location
Link: http://js.syncfusion.com/demos/LightSwitch/HTMLClient
 
Regards,
Sanjith K
Please let us know if you have any other queries, we are happy to help you.

Loader.
Live Chat Icon For mobile
Up arrow icon