ejLinearGauge

20 Sep 201824 minutes to read

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
    }
   
});