ejLinearGauge

The Linear gauge can be easily configured to the DOM element, such as div. you can create a linear gauge with a highly customizable look and feel.

$(element).ejLinearGauge(options)

Name Type Description
  • html
  • options
    object For setting the Linear gauge

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $('#LinearGauge1').ejLinearGauge();     
    </script>

    Requires

    • module:jQuery

    • module:ej.common.all

    • module:excanvas.js

    Members

    animationSpeed number

    Specifies the animationSpeed

    Default Value

    • 500

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ animationSpeed: 1000, value:50});
    </script>

    backgroundColor string

    Specifies the backgroundColor for Linear gauge.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ backgroundColor: "Red" });   
    </script>

    borderColor string

    Specifies the borderColor for Linear gauge.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ borderColor: "Red" });   
    </script>

    enableAnimation boolean

    Specifies the animate state

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ enableAnimation: true, value:50});  
    </script>

    enableMarkerPointerAnimation boolean

    Specifies the animate state for marker pointer

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ enableMarkerPointerAnimation: true, value:50});  
    </script>

    exportSettings object

    This provides options for customizing export settings

    exportSettings.filename string

    Specifies the downloading filename

    Default Value

    • “LinearGauge”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ 
                    exportSettings: { 
                         filename : "myGauge" 
                    } 
            });  
    </script>

    exportSettings.type enum

    Specifies the format of the file to export

    Name Type Description
    PNG string The gauge will be exported in .png format
    JPG string The gauge will be exported in .jpg format

    Default Value

    • “png”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ 
                    exportSettings: { 
                        type : "jpg"
                    } 
            });  
    </script>

    exportSettings.action string

    Specifies the name of the action URL

    Default Value

    • ””

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ 
                    exportSettings: { 
                       action : "http://js.syncfusion.com/ExportingServices/api/JSLinearGaugeExport/Export"
                    } 
            });  
    </script>

    exportSettings.mode enum

    Specifies the mode of exporting

    Name Type Description
    Server Side string The Gauge is exported at server side
    Client Side string The Gauge is exported at client side

    Default Value

    • “client”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ 
                    exportSettings: { 
                       mode : "server"
                    } 
            });  
    </script>

    isResponsive boolean

    Specifies the can resize state.

    Default Value

    • false

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ isResponsive: true });   
    </script>

    enableGroupSeparator boolean

    Used to Convert the date object to string while using the locale settings

    Default Value

    • false

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ enableGroupSeparator: true });   
    </script>

    enableResize boolean

    Responsiveness of the linear gauge is controlled

    Default Value

    • false

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ enableResize: true });   
    </script>

    frame object

    Specify frame of linear gauge

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1">
    </div> 
     
    <script>                  
    $("#LinearGauge1").ejLinearGauge({ frame: { backgroundImageUrl:null, outerWidth:12, innerWidth:8 } });
    </script>

    frame.backgroundImageUrl string

    Specifies the frame background image URL of linear gauge

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>  
            $("#LinearGauge1").ejLinearGauge({ frame:{backgroundImageUrl: "bg.png"} });  
    </script>

    frame.innerWidth number

    Specifies the frame InnerWidth

    Default Value

    • 8

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ frame:{innerWidth: 9}});   
    </script>

    frame.outerWidth number

    Specifies the frame OuterWidth

    Default Value

    • 12

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ frame:{outerWidth: 13 }});   
    </script>

    height number

    Specifies the height of Linear gauge.

    Default Value

    • 400

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({ height: 360 }); 
    </script>

    labelColor string

    Specifies the labelColor for Linear gauge.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ labelColor: "Red" });   
    </script>

    locale string

    Set the localization culture for the Linear gauge

    Default Value

    • “en-US”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ locale : "en-US" }); 
    </script>

    maximum number

    Specifies the maximum value of Linear gauge.

    Default Value

    • 100

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ maximum: 110 }); 
    </script>

    minimum number

    Specifies the minimum value of Linear gauge.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({ minimum: 10 });  
    </script>

    orientation string

    Specifies the orientation for Linear gauge.

    Default Value

    • “Vertical”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ orientation: "Vertical" });   
    </script>

    outerCustomLabelPosition enum

    Specify labelPosition value of Linear gauge See OuterCustomLabelPosition

    Name Type Description
    Left string Label will be placed on left side of the gauge
    Right string Label will be placed on right side of the gauge
    Top string Label will be placed on top of the gauge
    Bottom string Label will be placed on bottom of the gauge

    Default Value

    • bottom

    Example

  • html
  • <div id="CoreLinearGauge">
    </div> 
     
    <script>                  
    $("#CoreLinearGauge").ejLinearGauge({  outerCustomLabelPosition:"top" });
    </script>

    pointerGradient1 object

    Specifies the pointerGradient1 for Linear gauge.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({ pointerGradient1: { colorInfo:[{ colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] } });  
    </script>

    pointerGradient2 object

    Specifies the pointerGradient2 for Linear gauge.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ pointerGradient2: { colorInfo:[{ colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] } });  
    </script>

    readOnly boolean

    Specifies the read only state.

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ readOnly: false });   
    </script>

    scales array

    Specifies the scales

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ scales: [{}]});   
    </script>

    scales.backgroundColor string

    Specifies the backgroundColor of the Scale.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{backgroundColor:"red"}]}); 
    </script>

    scales.barPointers Array

    Specifies the scaleBar Gradient of bar pointer

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{}]}]});                              
    </script>

    scales.barPointers.backgroundColor string

    Specifies the backgroundColor of bar pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, backgroundColor: "red"}]}]});              
    </script>

    scales.barPointers.border object

    Specifies the border of bar pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, border:{color: "red", width:1.5}}]}]});    
    </script>

    scales.barPointers.border.color string

    Specifies the border Color of bar pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, border:{color: "red"}}]}]});       
    </script>

    scales.barPointers.border.width number

    Specifies the border Width of bar pointer

    Default Value

    • 1.5

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, border:{width: 2}}]}]});           
    </script>

    scales.barPointers.distanceFromScale number

    Specifies the distanceFromScale of bar pointer

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, distanceFromScale: 20}]}]});               
    </script>

    scales.barPointers.gradients object

    Specifies the scaleBar Gradient of bar pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, gradients: { colorInfo:[{ colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] }}]}]});               
    </script>

    scales.barPointers.opacity number

    Specifies the opacity of bar pointer

    Default Value

    • 1

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, opacity: 0.5}]}]});        
    </script>

    scales.barPointers.value number

    Specifies the value of bar pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value: 100}]}]});            
    </script>

    scales.barPointers.width number

    Specifies the pointer Width of bar pointer

    Default Value

    • width=30

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{barPointers:[{value:50, width: 25}]}]});           
    </script>

    scales.border object

    Specifies the border of the Scale.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{border:{color:"red", width:1.5}}]});       
    </script>

    scales.border.color string

    Specifies the border color of the Scale.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{border:{color:"red"}}]});  
    </script>

    scales.border.width number

    Specifies the border width of the Scale.

    Default Value

    • 1.5

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{border:{width:2.5}}]});    
    </script>

    scales.customLabels Array

    Specifies the customLabel

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.customLabels.color number

    Specifies the label Color in customLabels

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"yellow", font: { size: "20px",fontFamily: "Arial", fontStyle: "Bold" }}]}]});
    </script>

    scales.customLabels.font object

    Specifies the font in customLabels

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.customLabels.font.fontFamily string

    Specifies the fontFamily in customLabels

    Default Value

    • “Arial”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.customLabels.font.fontStyle enum

    Specifies the fontStyle in customLabels. See FontStyle

    Name Type Description
    Bold string Sets the font style as bold
    Italic string Sets the font style as italic
    Regular string Sets the font style as regular
    Strikeout string Sets the font style as strikeout
    Underline string Sets the font style as underline

    Default Value

    • Bold

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.customLabels.font.size string

    Specifies the font size in customLabels

    Default Value

    • “11px”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.customLabels.opacity string

    Specifies the opacity in customLabels

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606",opacity:0.5, font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.customLabels.position object

    Specifies the position in customLabels

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"LinearGauge", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});           
    </script>

    scales.customLabels.position.x number

    Specifies the position x in customLabels

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ textAngle: 20,value:"LinearGauge", position:{x:10,y:50}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});              
    </script>

    scales.customLabels.position.y number

    Specifies the y in customLabels

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ textAngle: 20,value:"LinearGauge", position:{x:49,y:10}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});              
    </script>

    scales.customLabels.positionType object

    Specifies the positionType in customLabels.See CustomLabelPositionType

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ positionType:"outer",value:"LinearGauge", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});              
    </script>

    scales.customLabels.textAngle number

    Specifies the textAngle in customLabels

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ textAngle: 20,value:"LinearGauge", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});             
    </script>

    scales.customLabels.value string

    Specifies the label Value in customLabels

    Default Value

    • ””

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"LinearGauge", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    </script>

    scales.direction enum

    Specifies the scale Direction of the Scale. See Directions

    Name Type Description
    Clockwise string Specify the scale direction as clockwise
    CounterClockwise string Specify the scale direction as counterclockwise

    Default Value

    • CounterClockwise

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{direction:ej.datavisualization.LinearGauge.Directions.Clockwise}]});       
    </script>

    scales.indicators Array

    Specifies the indicator

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({scales: [{showBarPointers: false, showIndicators: true, length: 310, indicators: [{
       font: {size: "11px",fontFamily: "Arial",fontStyle: "bold"},height: 30,
       type: "rectangle",width: 30,position: {x: 60,y: 70},textLocation: {x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 50,backgroundColor: "Red",borderColor: "Green",textColor: null}],
       value: 0, backgroundColor: "Red", border:{color: "Red", width: 1.5}, opacity: NaN}]}]});             
    </script>

    scales.indicators.backgroundColor string

    Specifies the backgroundColor in bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red"}],
       backgroundColor:"green"}]}]});       
    </script>

    scales.indicators.border number

    Specifies the border in bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red"}],
       border:{color:"red", width: 5}}]}]});                
    </script>

    scales.indicators.border.color string

    Specifies the border Color in bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red"}],
       border:{color: "Red"}}]}]}); 
    </script>

    scales.indicators.border.width number

    Specifies the border Width in bar indicators

    Default Value

    • 1.5

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red"}],
       border:{width: 5}}]}]});             
    </script>

    scales.indicators.font object

    Specifies the font of bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "bold" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 50, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});
    </script>

    scales.indicators.font.fontFamily string

    Specifies the fontFamily of font in bar indicators

    Default Value

    • “Arial”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>  
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Segoe UI", fontStyle: "bold" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 50, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});                       
    </script>

    scales.indicators.font.fontStyle enum

    Specifies the fontStyle of font in bar indicators. See FontStyle

    Default Value

    • ej.datavisualization.LinearGauge.FontStyle.Bold

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 50, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});       
    </script>

    scales.indicators.font.size string

    Specifies the size of font in bar indicators

    Default Value

    • “11px”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "20px", fontFamily: "Arial", fontStyle: "bold" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 50, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});       
    </script>

    scales.indicators.height number

    Specifies the indicator Height of bar indicators

    Default Value

    • 30

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       type: "rectangle",height: 50,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red",}],
       border:{width: 1.5}}]}]});   
    </script>

    scales.indicators.opacity number

    Specifies the opacity in bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ readonly:false, scales: [{showBarPointers: false, showIndicators: true, indicators: [{height: 30,
    type: "rectangle",position: {x: 80,y: 110},
    stateRanges: [{endValue: 80,startValue: 50,backgroundColor: "Red",borderColor: "Green",textColor: null}],
    value: 0, backgroundColor: "Red", border:{color: "Green"}, opacity:0.5}]}]});
    </script>

    scales.indicators.position object

    Specifies the position in bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red",}],
       border:{width: 1.5}}]}]});           
    </script>

    scales.indicators.position.x number

    Specifies the x position in bar indicators

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 20,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red",}],
       border:{width: 1.5}}]}]});           
    </script>

    scales.indicators.position.y number

    Specifies the y position in bar indicators

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 100},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red",}],
       border:{width: 1.5}}]}]});
    </script>

    scales.indicators.stateRanges Array

    Specifies the state ranges in bar indicators

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 0, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});       
    </script>

    scales.indicators.stateRanges.backgroundColor string

    Specifies the backgroundColor in bar indicators state ranges

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Red",borderColor: "Green"}],
       border:{width: 1.5}}]}]});
    </script>

    scales.indicators.stateRanges.borderColor string

    Specifies the borderColor in bar indicators state ranges

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red"}],
       border:{width: 1.5}}]}]});
    </script>

    scales.indicators.stateRanges.endValue number

    Specifies the endValue in bar indicators state ranges

    Default Value

    • 60

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 0, y: 100 },
      stateRanges: [{ endValue: 90, startValue: 40, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});
    </script>

    scales.indicators.stateRanges.startValue number

    Specifies the startValue in bar indicators state ranges

    Default Value

    • 50

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 0, y: 100 },
      stateRanges: [{ endValue: 90, startValue: 40, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});
    </script>

    scales.indicators.stateRanges.text string

    Specifies the text in bar indicators state ranges

    Default Value

    • ””

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 20, y: 100 },
      stateRanges: [{ endValue: 90, startValue: 40, textColor: "Green", text: "Linear Gauge" }],opacity: 0.5}]}]}); 
    </script>

    scales.indicators.stateRanges.textColor string

    Specifies the textColor in bar indicators state ranges

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>  
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 0, y: 100 },
      stateRanges: [{ endValue: 90, startValue: 40, textColor: "Red", text: "Linear" }],opacity: 0.5}]}]}); 
    </script>

    scales.indicators.textLocation object

    Specifies the textLocation in bar indicators

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 50, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});       
    </script>

    scales.indicators.textLocation.x number

    Specifies the textLocation position in bar indicators

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 50, y: 0 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});
    </script>

    scales.indicators.textLocation.y number

    Specifies the Y position in bar indicators

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
      value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
      font: { size: "11px", fontFamily: "Arial", fontStyle: "Normal" }, height: 30,
      type: "text", width: 30, position: { x: 60, y: 100 }, textLocation: { x: 0, y: 100 },
      stateRanges: [{ endValue: 60, startValue: 50, textColor: "Green", text: "Linear" }],opacity: 0.5}]}]});
    </script>

    scales.indicators.type enum

    Specifies the indicator Style of font in bar indicators

    Name Type Description
    Rectangle string Style of the indicator will be rectangle
    Circle string Style of the indicator will be Circle
    RoundedRectangle string Style of the indicator will be rounded rectangle
    Text string Style of the indicator will be text

    Default Value

    • ej.datavisualization.LinearGauge.IndicatorType.Rectangle

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       height: 30,type: "rectangle",width: 30,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red",}],
       border:{width: 1.5}}]}]});
    </script>

    scales.indicators.width number

    Specifies the indicator Width in bar indicators

    Default Value

    • 30

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       value: 50, scales: [{showBarPointers: true, showIndicators: true, length: 310, indicators: [{
       type: "rectangle",width: 50,
       position: { x: 0,y: 0},
       stateRanges: [{endValue: 60,startValue: 40,backgroundColor: "Green",borderColor: "Red",}],
       border:{width: 1.5}}]}]});
    </script>

    scales.labels Array

    Specifies the labels.

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{distanceFromScale:{y:1}}]}]});                    
    </script>

    scales.labels.angle number

    Specifies the angle of labels.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{angle:30}]}]});                           
    </script>

    scales.labels.distanceFromScale object

    Specifies the DistanceFromScale of labels.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{distanceFromScale:{x:10, y:10}}]}]});             
    </script>

    scales.labels.distanceFromScale.x number

    Specifies the xDistanceFromScale of labels.

    Default Value

    • -10

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{distanceFromScale:{x:10}}]}]});           
    </script>

    scales.labels.distanceFromScale.y number

    Specifies the yDistanceFromScale of labels.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>  
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{distanceFromScale:{y:20}}]}]});           
    </script>

    scales.labels.font object

    Specifies the font of labels.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{font:{size: "11px"}}]}]});                
    </script>

    scales.labels.font.fontFamily string

    Specifies the fontFamily of font.

    Default Value

    • “Arial”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{font:{fontFamily: "Segoe UI"}}]}]});              
    </script>

    scales.labels.font.fontStyle enum

    Specifies the fontStyle of font.See FontStyle

    Default Value

    • ej.datavisualization.LinearGauge.FontStyle.Bold

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{font:{fontStyle: ej.datavisualization.LinearGauge.FontStyle.Normal}}]}]});                
    </script>

    scales.labels.font.size string

    Specifies the size of font.

    Default Value

    • “11px”

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{font:{size: "18px"}}]}]});                
    </script>

    scales.labels.includeFirstValue boolean

    need to includeFirstValue.

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>  
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{includeFirstValue: false}]}]});           
    </script>

    scales.labels.opacity number

    Specifies the opacity of label.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{opacity: 0.5}]}]});               
    </script>

    scales.labels.placement enum

    Specifies the label Placement of label. See LabelPlacement

    Name Type Description
    Near string Specify the label placement as near
    Far string Specify the label placement as far
    Center string Specify the label placement as center

    Default Value

    • Near

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{placement: ej.datavisualization.LinearGauge.LabelPlacement.Far}]}]});     
    </script>

    scales.labels.textColor string

    Specifies the textColor of font.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{textColor: "green"}]}]});         
    </script>

    scales.labels.type enum

    Specifies the label Style of label. See LabelType

    Name Type Description
    Major string Specifies the label style as major
    Minor string Specifies the label style as minor

    Default Value

    • ej.datavisualization.LinearGauge.LabelType.Major

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{type: ej.datavisualization.LinearGauge.LabelType.Major}]}]});     
    </script>

    scales.labels.unitText string

    Specifies the unitText of label.

    Default Value

    • ””

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{unitText: "F"}]}]});      
    </script>

    scales.labels.unitTextPlacement enum

    Specifies the unitText Position of label.See UnitTextPlacement

    Name Type Description
    Back string The unit text will be placed on back side of the gauge
    From string The unit text will be placed on front side of the gauge

    Default Value

    • Back

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{labels:[{unitText: "F",unitTextPlacement: "front"}]}]});                           
    </script>

    scales.length number

    Specifies the scaleBar Length.

    Default Value

    • 290

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{length:300}]});
    </script>

    scales.majorIntervalValue number

    Specifies the majorIntervalValue of the Scale.

    Default Value

    • 10

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{majorIntervalValue:10}]});
    </script>

    scales.markerPointers Array

    Specifies the markerPointers

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{type: "triangle"}]}]});   
    </script>

    scales.markerPointers.backgroundColor string

    Specifies the backgroundColor of marker pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{backgroundColor: "blue"}]}]});            
    </script>

    scales.markerPointers.border object

    Specifies the border of marker pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{border:{color: "blue", width: 1.5}}]}]});         
    </script>

    scales.markerPointers.border.color string

    Specifies the border color of marker pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{border:{color: "blue", width: 1.5}}]}]});         
    </script>

    scales.markerPointers.border.width number

    Specifies the border of marker pointer

    Default Value

    • number

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{border:{color: "blue", width: 1.5}}]}]});         
    </script>

    scales.markerPointers.distanceFromScale number

    Specifies the distanceFromScale of marker pointer

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{distanceFromScale: 2}]}]});               
    </script>

    scales.markerPointers.gradients object

    Specifies the pointer Gradient of marker pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{gradients: { colorInfo:[{ colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] }}]}]});              
    </script>

    scales.markerPointers.length number

    Specifies the pointer Length of marker pointer

    Default Value

    • 30

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{length: 25}]}]});         
    </script>

    scales.markerPointers.opacity number

    Specifies the opacity of marker pointer

    Default Value

    • 1

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{opacity: 0.5}]}]});               
    </script>

    scales.markerPointers.placement enum

    Specifies the pointer Placement of marker pointer See PointerPlacement

    Default Value

    • Far

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{placement: ej.datavisualization.LinearGauge.PointerPlacement.Near}]}]});          
    </script>

    scales.markerPointers.type enum

    Specifies the marker Style of marker pointerSee MarkerType

    Name Type Description
    Rectangle string Style of the marker will be rectangle
    Triangle string Style of the marker will be triangle
    Ellipse string Style of the marker will be ellipse
    Diamond string Style of the marker will be diamond
    Pentagon string Style of the marker will be pentagon
    Circle string Style of the marker will be circle
    Star string Style of the marker will be star
    Slider string Style of the marker will be slider
    Pointer string Style of the marker will be pointer
    Wedge string Style of the marker will be wedge
    Trapezoid string Style of the marker will be trapezoid
    RoundedRectangle string Style of the marker will be rounded rectangle

    Default Value

    • Triangle

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{type: ej.datavisualization.LinearGauge.MarkerType.Rectangle}]}]});                
    </script>

    scales.markerPointers.value number

    Specifies the value of marker pointer

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{value: 25}]}]});          
    </script>

    scales.markerPointers.width number

    Specifies the pointer Width of marker pointer

    Default Value

    • 30

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{markerPointers:[{width: 25}]}]});          
    </script>

    scales.maximum number

    Specifies the maximum of the Scale.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{maximum:110}]});   
    </script>

    scales.minimum number

    Specifies the minimum of the Scale.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{minimum:10}]});    
    </script>

    scales.minorIntervalValue number

    Specifies the minorIntervalValue of the Scale.

    Default Value

    • 2

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{minorIntervalValue:1}]});  
    </script>

    scales.opacity number

    Specifies the opacity of the Scale.

    Default Value

    • NaN

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{opacity:0.2}]});   
    </script>

    scales.position object

    Specifies the position

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{position:{x:30, y:30}}]});         
    </script>

    scales.position.x number

    Specifies the Horizontal position

    Default Value

    • 50

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{position:{x:30}}]});               
    </script>

    scales.position.y number

    Specifies the vertical position

    Default Value

    • 50

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{position:{y:30}}]});               
    </script>

    scales.ranges Array

    Specifies the ranges in the tick.

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ranges:[{endWidth:4}]}]});         
    </script>

    scales.ranges.backgroundColor string

    Specifies the backgroundColor in the ranges.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "Green" }] }] });                  
    </script>

    scales.ranges.border object

    Specifies the border in the ranges.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649", border:{color: "Green", width:1.5} }] }] });            
    </script>

    scales.ranges.border.color string

    Specifies the border color in the ranges.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649", border:{color: "Green"} }] }] });               
    </script>

    scales.ranges.border.width number

    Specifies the border width in the ranges.

    Default Value

    • 1.5

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649", border:{width:1.5} }] }] });            
    </script>

    scales.ranges.distanceFromScale number

    Specifies the distanceFromScale in the ranges.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649",distanceFromScale: 10 }] }] });  
    </script>

    scales.ranges.endValue number

    Specifies the endValue in the ranges.

    Default Value

    • 60

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });                                        
    </script>

    scales.ranges.endWidth number

    Specifies the endWidth in the ranges.

    Default Value

    • 10

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });        
    </script>

    scales.ranges.gradients object

    Specifies the range Gradient in the ranges.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649",gradients:{ colorInfo:[{colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] } }] }] });    
    </script>

    scales.ranges.opacity number

    Specifies the opacity in the ranges.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649",opacity: 0.3 }] }] });                           
    </script>

    scales.ranges.placement enum

    Specifies the range Position in the ranges. See RangePlacement

    Default Value

    • Center

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649",placement: "center" }] }] });
    </script>

    scales.ranges.startValue number

    Specifies the startValue in the ranges.

    Default Value

    • 20

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 10, endValue: 60, startValue: 10, backgroundColor: "#E94649" }] }] });                       
    </script>

    scales.ranges.startWidth number

    Specifies the startWidth in the ranges.

    Default Value

    • 10

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 20, endWidth: 10, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });                
    </script>

    scales.shadowOffset number

    Specifies the shadowOffset.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{shadowOffset:1}]});                
    </script>

    scales.showBarPointers boolean

    Specifies the showBarPointers state.

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{showBarPointers:false}]});         
    </script>

    scales.showCustomLabels boolean

    Specifies the showCustomLabels state.

    Default Value

    • false

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true}]}); 
    </script>

    scales.showIndicators boolean

    Specifies the showIndicators state.

    Default Value

    • false

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showIndicators:true}]});   
    </script>

    scales.showLabels boolean

    Specifies the showLabels state.

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showLabels:false}]});              
    </script>

    scales.showMarkerPointers boolean

    Specifies the showMarkerPointers state.

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{showMarkerPointers:false}]});      
    </script>

    scales.showRanges boolean

    Specifies the showRanges state.

    Default Value

    • false

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showRanges:false}]});      
    </script>

    scales.showTicks boolean

    Specifies the showTicks state.

    Default Value

    • true

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{showTicks:false}]});                       
    </script>

    scales.ticks Array

    Specifies the ticks in the scale.

    Default Value

    • Array

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{angle:30}]}]});            
    </script>

    scales.ticks.angle number

    Specifies the angle in the tick.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{angle:20}]}]});                            
    </script>

    scales.ticks.color string

    Specifies the tick Color in the tick.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{color:"Blue"}]}]});        
    </script>

    scales.ticks.distanceFromScale object

    Specifies the DistanceFromScale in the tick.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{distanceFromScale:{x:10, y:10}}]}]});      
    </script>

    scales.ticks.distanceFromScale.x number

    Specifies the xDistanceFromScale in the tick.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{distanceFromScale:{x:10}}]}]});    
    </script>

    scales.ticks.distanceFromScale.y number

    Specifies the yDistanceFromScale in the tick.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>  
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{distanceFromScale:{y:10}}]}]});            
    </script>

    scales.ticks.height number

    Specifies the tick Height in the tick.

    Default Value

    • 10

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{height:8}]}]});            
    </script>

    scales.ticks.opacity number

    Specifies the opacity in the tick.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{opacity:0.5}]}]});                                         
    </script>

    scales.ticks.placement enum

    Specifies the tick Placement in the tick. See TickPlacement

    Default Value

    • Near

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script> 
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{placement:ej.datavisualization.LinearGauge.TickPlacement.Far}]}]});                
    </script>

    scales.ticks.type enum

    Specifies the tick Style in the tick. See TickType

    Name Type Description
    Majorinterval string Sets the tick style as major interval
    Minorinterval string Sets the tick style as minor interval

    Default Value

    • MajorInterval

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{type:ej.datavisualization.LinearGauge.TickType.MajorInterval}]}]});                
    </script>

    scales.ticks.width number

    Specifies the tick Width in the tick.

    Default Value

    • 3

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{ticks:[{width:4}]}]});                     
    </script>

    scales.type enum

    Specifies the scaleBar type .See ScaleType

    Name Type Description
    Rectangle string Type of the scale bar will be rectangle
    RoundedRectangle string Type of the scale bar will be roundedrectangle
    Thermometer string Type of the scale bar will be thermometer

    Default Value

    • Rectangle

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{type:ej.datavisualization.LinearGauge.ScaleType.Rectangle}]});     
    </script>

    scales.width number

    Specifies the scaleBar width.

    Default Value

    • 30

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{width:25}]});              
    </script>

    theme enum

    Specifies the theme for Linear gauge. See LinearGauge.Themes

    Name Type Description
    FlatLight string Theme of linear gauge will be flatlight
    FlatDark string Theme of linear gauge will be flatdark

    Default Value

    • flatlight

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ theme: ej.datavisualization.LinearGauge.flatdark });
    </script>

    tickColor string

    Specifies the tick Color for Linear gauge.

    Default Value

    • null

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ tickColor: "Red" });   
    </script>

    tooltip object

    Specify tooltip options of linear gauge

    Default Value

    • false

    Example

  • html
  • <div id="CoreLinearGauge">
    </div> 
     
    <script>                  
    $("#CoreLinearGauge").ejLinearGauge({  tooltip:{showLabelTooltip: true,showCustomLabelTooltip: true,templateID: null} });
    </script>

    tooltip.showCustomLabelTooltip boolean

    Specify showCustomLabelTooltip value of linear gauge

    Default Value

    • false

    Example

  • html
  • <div id="CoreLinearGauge">
    </div> 
     
    <script>                  
    $("#CoreLinearGauge").ejLinearGauge({  tooltip:{showCustomLabelTooltip: true} });
    </script>

    tooltip.showLabelTooltip boolean

    Specify showLabelTooltip value of linear gauge

    Default Value

    • false

    Example

  • html
  • <div id="CoreLinearGauge">
    </div> 
     
    <script>                  
    $("#CoreLinearGauge").ejLinearGauge({  tooltip:{showLabelTooltip: true} });
    </script>

    tooltip.templateID string

    Specify templateID value of linear gauge

    Default Value

    • false

    Example

  • html
  • <div id="CoreLinearGauge">
    </div> 
     
    <script>                  
    $("#CoreLinearGauge").ejLinearGauge({  tooltip:{showLabelTooltip: true, templateID: true} });
    </script>

    value number

    Specifies the value of the Gauge.

    Default Value

    • 0

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({  size: 5.5});        
    </script>

    width number

    Specifies the width of Linear gauge.

    Default Value

    • 150

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({ width: 360 });  
    </script>

    Methods

    destroy()

    destroy the linear gauge all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var linearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    linearGaugeObj.destroy();
    </script>

    exportImage(fileName, fileType)

    To export Image

    Name Type Description
  • html
  • fileName
    number for the Image
  • html
  • fileType
    number for the Image

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.exportImage("myImage","jpeg");
    </script>

    getBarDistanceFromScale(scaleIndex, pointerIndex)

    To get Bar Distance From Scale in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({value:50});
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getBarDistanceFromScale(0,0);
    </script>

    getBarPointerValue(scaleIndex, pointerIndex)

    To get Bar Pointer Value in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({value:50});
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getBarPointerValue(0,0);
    </script>

    getBarWidth(scaleIndex, pointerIndex)

    To get Bar Width in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({value:50});
    // get Bar Width in number
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getBarWidth(0,0);
    </script>

    getCustomLabelAngle(scaleIndex, customLabelIndex)

    To get CustomLabel Angle in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • customLabelIndex
    number customLabelIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getCustomLabelAngle(0,0);
    </script>

    getCustomLabelValue(scaleIndex, customLabelIndex)

    To get CustomLabel Value in string

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • customLabelIndex
    number customLabelIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getCustomLabelValue(0,0);
    </script>

    getLabelAngle(scaleIndex, labelIndex)

    To get Label Angle in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getLabelAngle(0,0);
    </script>

    getLabelPlacement(scaleIndex, labelIndex)

    To get LabelPlacement in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getLabelPlacement(0,0);
    </script>

    getLabelStyle(scaleIndex, labelIndex)

    To get LabelStyle in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getLabelStyle(0,0);
    </script>

    getLabelXDistanceFromScale(scaleIndex, labelIndex)

    To get Label XDistance From Scale in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getLabelXDistanceFromScale(0,0);
    </script>

    getLabelYDistanceFromScale(scaleIndex, labelIndex)

    To get PointerValue in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getLabelYDistanceFromScale(0,0);
    </script>

    getMajorIntervalValue(scaleIndex)

    To get Major Interval Value in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getMajorIntervalValue(0);
    </script>

    getMarkerStyle(scaleIndex, pointerIndex)

    To get MarkerStyle in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getMarkerStyle(0,0);
    </script>

    getMaximumValue(scaleIndex)

    To get Maximum Value in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getMaximumValue(0);
    </script>

    getMinimumValue(scaleIndex, pointerIndex)

    To get PointerValue in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getMinimumValue(0,0);
    </script>

    getMinorIntervalValue(scaleIndex)

    To get Minor Interval Value in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getMinorIntervalValue(0);
    </script>

    getPointerDistanceFromScale(scaleIndex, pointerIndex)

    To get Pointer Distance From Scale in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getPointerDistanceFromScale(0,0);
    </script>

    getPointerHeight(scaleIndex, pointerIndex)

    To get PointerHeight in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getPointerHeight(0,0);
    </script>

    getPointerPlacement(scaleIndex, pointerIndex)

    To get Pointer Placement in String

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getPointerPlacement(0,0);
    </script>

    getPointerValue(scaleIndex, pointerIndex)

    To get PointerValue in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getPointerValue(0,0);
    </script>

    getPointerWidth(scaleIndex, pointerIndex)

    To get PointerWidth in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getPointerWidth(0,0);
    </script>

    getRangeBorderWidth(scaleIndex, rangeIndex)

    To get Range Border Width in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangeBorderWidth(0,0);
    </script>

    getRangeDistanceFromScale(scaleIndex, rangeIndex)

    To get Range Distance From Scale in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangeDistanceFromScale(0,0);
    </script>

    getRangeEndValue(scaleIndex, rangeIndex)

    To get Range End Value in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangeEndValue(0,0);
    </script>

    getRangeEndWidth(scaleIndex, rangeIndex)

    To get Range End Width in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangeEndWidth(0,0);
    </script>

    getRangePosition(scaleIndex, rangeIndex)

    To get Range Position in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangePosition(0,0);
    </script>

    getRangeStartValue(scaleIndex, rangeIndex)

    To get Range Start Value in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangeStartValue(0,0);
    </script>

    getRangeStartWidth(scaleIndex, rangeIndex)

    To get Range Start Width in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getRangeStartWidth(0,0);
    </script>

    getScaleBarLength(scaleIndex)

    To get ScaleBarLength in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getScaleBarLength(0);
    </script>

    getScaleBarSize(scaleIndex, pointerIndex)

    To get Scale Bar Size in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getScaleBarSize(0,0);
    </script>

    getScaleBorderWidth(scaleIndex)

    To get Scale Border Width in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getScaleBorderWidth(0);
    </script>

    getScaleDirection(scaleIndex)

    To get Scale Direction in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getScaleDirection(0,0);
    </script>

    getScaleLocation(scaleIndex)

    To get Scale Location in object

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getScaleLocation(0);
    </script>

    getScaleStyle(scaleIndex)

    To get Scale Style in string

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getScaleStyle(0);
    </script>

    getTickAngle(scaleIndex, tickIndex)

    To get Tick Angle in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickAngle(0,0);
    </script>

    getTickHeight(scaleIndex, tickIndex)

    To get Tick Height in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickHeight(0,0);
    </script>

    getTickPlacement(scaleIndex, tickIndex)

    To get getTickPlacement in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickPlacement(0,0);
    </script>

    getTickStyle(scaleIndex, tickIndex)

    To get Tick Style in string

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickStyle(0,0);
    </script>

    getTickWidth(scaleIndex, tickIndex)

    To get Tick Width in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickWidth(0,0);
    </script>

    getTickXDistanceFromScale(scaleIndex, tickIndex)

    To get get Tick XDistance From Scale in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickXDistanceFromScale(0,0);
    </script>

    getTickYDistanceFromScale(scaleIndex, tickIndex)

    To get Tick YDistance From Scale in number

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge

    Returns: any

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.getTickYDistanceFromScale(0,0);
    </script>

    scales()

    Specifies the scales.

    Default Value

    • null

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
            $("#LinearGauge1").ejLinearGauge({  scales:[{minimum:5}]});
    </script>

    setBarDistanceFromScale(scaleIndex, pointerIndex, value)

    To set setBarDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex,value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    number Bar DistanceFromScale value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setBarDistanceFromScale(0,0,30);
    </script>

    setBarPointerValue(scaleIndex, pointerIndex, value)

    To set setBarPointerValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    number Bar Pointer Value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setBarPointerValue(0,0,30);
    </script>

    setBarWidth(scaleIndex, pointerIndex, value)

    To set setBarWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    number Bar Width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setBarWidth(0,0,30);
    </script>

    setCustomLabelAngle(scaleIndex, customLabelIndex, value)

    To set setCustomLabelAngle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • customLabelIndex
    number customLabelIndex value for the Gauge
  • html
  • value
    number Custom Label Angle for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setCustomLabelAngle(0,0,30);
    </script>

    setCustomLabelValue(scaleIndex, customLabelIndex, value)

    To set setCustomLabelValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • customLabelIndex
    number customLabelIndex value for the Gauge
  • html
  • value
    number CustomLabel value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({  scales:[{showCustomLabels:true,customLabels: [{ value:"MyLabel", position:{x:49,y:100}, color:"#fc0606", font: { size: "20px",fontFamily: "Arial", fontStyle: "bold" }}]}]});
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setCustomLabelValue(0,0,"text");
    </script>

    setLabelAngle(scaleIndex, labelIndex, angle)

    To set setLabelAngle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge
  • html
  • angle
    number Label Angle for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setLabelAngle(0,0,20);
    </script>

    setLabelPlacement(scaleIndex, labelIndex, value)

    To set setLabelPlacement

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge
  • html
  • value
    number Label Placement for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setLabelPlacement(0,0,"far");
    </script>

    setLabelStyle(scaleIndex, labelIndex, value)

    To set setLabelStyle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge
  • html
  • value
    string Label Style for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setLabelStyle(0,0,"major");
    </script>

    setLabelXDistanceFromScale(scaleIndex, labelIndex, value)

    To set setLabelXDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge
  • html
  • value
    number Label XDistance From Scale for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setLabelXDistanceFromScale(0,0,20);
    </script>

    setLabelYDistanceFromScale(scaleIndex, labelIndex, value)

    To set setLabelYDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • labelIndex
    number value for the Gauge
  • html
  • value
    number Label YDistance From Scale for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setLabelYDistanceFromScale(0,0,20);
    </script>

    setMajorIntervalValue(scaleIndex, value)

    To set setMajorIntervalValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number Major Interval Value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setMajorIntervalValue(0,5);
    </script>

    setMarkerStyle(scaleIndex, pointerIndex, value)

    To set setMarkerStyle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    string marker Style for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setMarkerStyle(0,0,"triangle");
    </script>

    setMaximumValue(scaleIndex, value)

    To set setMaximumValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number MaximumValue for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setMaximumValue(0,20);
    </script>

    setMinimumValue(scaleIndex, value)

    To set setMinimumValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number MinimumValue for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setMinimumValue(0,20);
    </script>

    setMinorIntervalValue(scaleIndex, value)

    To set setMinorIntervalValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number Minor Interval Value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setMinorIntervalValue(0,2);
    </script>

    setPointerDistanceFromScale(scaleIndex, pointerIndex, value)

    To set setPointerDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    number for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setPointerDistanceFromScale(0,0,30);
    </script>

    setPointerHeight(scaleIndex, pointerIndex, height)

    To set PointerHeight

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • height
    number for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setPointerHeight(0,0,30);
    </script>

    setPointerPlacement(scaleIndex, pointerIndex, value)

    To set setPointerPlacement

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    number pointer placement for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setPointerPlacement(0,0,"far");
    </script>

    setPointerValue(scaleIndex, pointerIndex, value)

    To set PointerValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • value
    number Pointer value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setPointerValue(0,0,30);
    </script>

    setPointerWidth(scaleIndex, pointerIndex, width)

    To set PointerWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • pointerIndex
    number pointerIndex value for the Gauge
  • html
  • width
    number Pointer width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setPointerWidth(0,0,30);
    </script>

    setRangeBorderWidth(scaleIndex, rangeIndex, value)

    To set setRangeBorderWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number Range Border Width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangeBorderWidth(0,0,2);
    </script>

    setRangeDistanceFromScale(scaleIndex, rangeIndex, value)

    To set setRangeDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number Range Distance FromScale for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangeDistanceFromScale(0,0,20);
    </script>

    setRangeEndValue(scaleIndex, rangeIndex, value)

    To set setRangeEndValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number Range end value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangeEndValue(0,0,20);
    </script>

    setRangeEndWidth(scaleIndex, rangeIndex, value)

    To set setRangeEndWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number Range End Width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangeEndWidth(0,0,20);
    </script>

    setRangePosition(scaleIndex, rangeIndex, value)

    To set setRangePosition

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number Range Position for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangePosition(0,0,20);
    </script>

    setRangeStartValue(scaleIndex, rangeIndex, value)

    To set setRangeStartValue

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number range start value for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangeStartValue(0,0,20);
    </script>

    setRangeStartWidth(scaleIndex, rangeIndex, value)

    To set setRangeStartWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • rangeIndex
    number rangeIndex value for the Gauge
  • html
  • value
    number Range Start Width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge({ scales: [{ showBarPointers: false, width: 3, length: 310, showRanges: true,ranges: [{ startWidth: 10, endWidth: 20, endValue: 60, startValue: 0, backgroundColor: "#E94649" }] }] });
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setRangeStartWidth(0,0,20);
    </script>

    setScaleBarLength(scaleIndex, value)

    To set setScaleBarLength

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number Scale Bar Length for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setScaleBarLength(0,150);
    </script>

    setScaleBarSize(scaleIndex, value)

    To set setScaleBarSize

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number ScaleBarSize for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setScaleBarSize(0,20);
    </script>

    setScaleBorderWidth(scaleIndex, value)

    To set setScaleBorderWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number Scale Border Width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setScaleBorderWidth(0,10);
    </script>

    setScaleDirection(scaleIndex, value)

    To set setScaleDirection

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number Scale Direction for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setScaleDirection(0,"counterclockwise");
    </script>

    setScaleLocation(scaleIndex, value)

    To set setScaleLocation

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    object Scale position for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setScaleLocation(0,{x:20,y:20});
    </script>

    setScaleStyle(scaleIndex, value)

    To set setScaleStyle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • value
    number for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setScaleStyle(0,"thermometer");
    </script>

    setTickAngle(scaleIndex, tickIndex, angle)

    To set setTickAngle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • angle
    number Tick Angle for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickAngle(0,0,20);
    </script>

    setTickHeight(scaleIndex, tickIndex, value)

    To set setTickHeight

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • value
    number Tick Height for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickHeight(0,0,10);
    </script>

    setTickPlacement(scaleIndex, tickIndex, value)

    To set setTickPlacement

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • value
    number Tick Placement for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickPlacement(0,0,"far");
    </script>

    setTickStyle(scaleIndex, tickIndex, value)

    To set setTickStyle

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • value
    string Tick Style for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickStyle(0,0,"major");
    </script>

    setTickWidth(scaleIndex, tickIndex, value)

    To set setTickWidth

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • value
    number Tick Width for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickWidth(0,0,5);
    </script>

    setTickXDistanceFromScale(scaleIndex, tickIndex, value)

    To set setTickXDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • value
    number Tick XDistance From Scale for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickXDistanceFromScale(0,0,20);
    </script>

    setTickYDistanceFromScale(scaleIndex, tickIndex, value)

    To set setTickYDistanceFromScale

    Name Type Description
  • html
  • scaleIndex
    number scaleIndex value for the Gauge
  • html
  • tickIndex
    number value for the Gauge
  • html
  • value
    number Tick YDistance From Scale for Gauge

    Returns: void

    Example

  • html
  • <div id="LinearGauge1"></div> 
      
    <script>
    $("#LinearGauge1").ejLinearGauge();
    var LinearGaugeObj = $("#LinearGauge1").data("ejLinearGauge");
    LinearGaugeObj.setTickYDistanceFromScale(0,0,20);
    </script>

    Events

    drawBarPointers

    Triggers while the bar pointer are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the pointer
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • style
    string returns the pointer style
  • html
  • barElement
    object returns the current Bar pointer element.
  • html
  • barPointerIndex
    number returns the index of the bar pointer.
  • html
  • PointerValue
    number returns the value of the bar pointer.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawBarPointers: function (args) {}
    });
    </script>

    drawCustomLabel

    Triggers while the customLabel are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the customLabel
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • style
    object returns the customLabel style
  • html
  • customLabelElement
    object returns the current customLabel element.
  • html
  • customLabelIndex
    number returns the index of the customLabel.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawCustomLabel: function (args) {}
    });
    </script>

    drawIndicators

    Triggers while the Indicator are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the Indicator
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • style
    string returns the Indicator style
  • html
  • IndicatorElement
    object returns the current Indicator element.
  • html
  • IndicatorIndex
    number returns the index of the Indicator.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawIndicators: function (args) {}
    });
    </script>

    drawLabels

    Triggers while the label are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the label
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the label belongs.
  • html
  • style
    string returns the label style
  • html
  • label
    object returns the label style
    Name Type Description
  • html
  • angle
    number returns the angle of the label.
  • html
  • element
    object returns the current label element.
  • html
  • index
    number returns the index of the label.
  • html
  • value
    number returns the label value of the label.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawLabels: function (args) {}
    });
    </script>

    drawMarkerPointers

    Triggers while the marker are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the pointer
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • style
    string returns the ticks style
  • html
  • markerElement
    object returns the current marker pointer element.
  • html
  • markerPointerIndex
    number returns the index of the marker pointer.
  • html
  • pointerValue
    number returns the value of the marker pointer.
  • html
  • pointerAngle
    number returns the angle of the marker pointer.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawMarkerPointers: function (args) {}
    });
    </script>

    drawRange

    Triggers while the range are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the range
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • style
    string returns the range style
  • html
  • rangeElement
    object returns the current range element.
  • html
  • rangeIndex
    number returns the index of the range.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawRange: function (args) {}
    });
    </script>

    drawTicks

    Triggers while the ticks are being drawn on the gauge.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • context
    object returns the context element
  • html
  • position
    object returns the startX and startY of the ticks
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the options of the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the tick belongs.
  • html
  • style
    string returns the ticks style
  • html
  • tick
    object returns the ticks style
    Name Type Description
  • html
  • angle
    number returns the angle of the tick.
  • html
  • element
    object returns the current tick element.
  • html
  • index
    number returns the index of the tick.
  • html
  • value
    number returns the tick value of the tick.
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       drawTicks: function (args) {}
    });
    </script>

    init

    Triggers when the gauge is initialized.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the entire scale element.
  • html
  • context
    object returns the context element
  • html
  • type
    string returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       init: function (args) {}
    });
    </script>

    load

    Triggers while the gauge start to Load.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the entire scale element.
  • html
  • context
    object returns the context element
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       load: function (args) {}
    });
    </script>

    mouseClick

    Triggers when the left mouse button is clicked.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • model
    object returns the gauge model
  • html
  • type
    object returns the name of the event
  • html
  • scaleElement
    object returns the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • context
    object returns the context element* @param {Object} args.markerpointer returns the context element
  • html
  • markerPointerIndex
    number returns the pointer Index
  • html
  • markerPointerElement
    object returns the pointer element.
  • html
  • markerPointerValue
    number returns the value of the pointer.
  • html
  • style
    string returns the pointer style
  • html
  • position
    object returns the startX and startY of the pointer.

    Example

  • html
  • <div id="LinearGauge1">
    </div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       mouseClick: function (args) {}
    });
    </script>

    mouseClickMove

    Triggers when clicking and dragging the mouse pointer over the gauge pointer.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • model
    object returns the gauge model
  • html
  • type
    object returns the name of the event
  • html
  • scaleElement
    object returns the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • context
    object returns the context element
  • html
  • markerPointer
    object returns the context element
    Name Type Description
  • html
  • index
    number returns the pointer Index
  • html
  • element
    object returns the pointer element.
  • html
  • value
    number returns the value of the pointer.
  • html
  • style
    string returns the pointer style
  • html
  • position
    object returns the startX and startY of the pointer.

    Example

  • html
  • <div id="LinearGauge1">
    </div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       mouseClickMove: function (args) {}
    });
    </script>

    mouseClickUp

    Triggers when the mouse click is released.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • model
    object returns the gauge model
  • html
  • type
    object returns the name of the event
  • html
  • scaleElement
    object returns the scale element.
  • html
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • html
  • context
    object returns the context element* @param {Object} args.markerPointer returns the context element
  • html
  • markerPointerIndex
    number returns the pointer Index
  • html
  • markerPointerElement
    object returns the pointer element.
  • html
  • markerPointerValue
    number returns the value of the pointer.
  • html
  • style
    string returns the pointer style
  • html
  • position
    object returns the startX and startY of the pointer.

    Example

  • html
  • <div id="LinearGauge1">
    </div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       mouseClickUp: function (args) {}
    });
    </script>

    renderComplete

    Triggers while the rendering of the gauge completed.

    Name Type Description
  • html
  • object
    object returns the object of the gauge.
  • html
  • cancel
    boolean returns the cancel option value
  • html
  • Model
    object returns the gauge model
  • html
  • scaleElement
    object returns the entire scale element.
  • html
  • context
    object returns the context element
  • html
  • type
    object returns the name of the event

    Example

  • html
  • <div id="LinearGauge1"></div> 
     
    <script>
    $("#LinearGauge1").ejLinearGauge({
       renderComplete: function (args) {}
    });
    </script>

    doubleClick

    Fires, on double clicking the gauge.

    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the gauge model object
  • js
  • type
    string Name of the event
  • js
  • data
    Object
    • location - X and Y co-ordinate of the points with respect to gauge area.
    • id - ID of the target element.
    • size - Width and height of the gauge.
    • pageX - x-coordinate of the pointer, relative to the page
    • pageY - y-coordinate of the pointer, relative to the page

    Example

  • js
  • //DoubleClick event for linear gauge.
    
    $("#LinearGauge1").ejLinearGauge({
    
        doubleClick: function (args) {
                  //Do something
        }
       
    });

    rightClick

    Fires, on right clicking the gauge.

    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the gauge model object
  • js
  • type
    string Name of the event
  • js
  • data
    Object
    • location - X and Y co-ordinate of the points with respect to gauge area.
    • id - ID of the target element.
    • size - Width and height of the gauge.
    • pageX - x-coordinate of the pointer, relative to the page
    • pageY - y-coordinate of the pointer, relative to the page

    Example

  • js
  • //RightClick event for linear gauge
    
    $("#LinearGauge1").ejLinearGauge({
        rightClick: function (args) {
                  //Do something
        }
       
    });