A gauge chart represents one or more values as needles or a single needle and markers on a circular surface. This chart type is typically used by executive dashboard applications.
These properties control the general layout of a gauge chart.
The following code segment shows the default values for the gauge properties:
gaugeProperties: { startAngle: 135, endAngle: 45, secondaryNeedlesAsMarkers: false, groupLabel: { visible: false, font: '10pt Sans-Serif', color: 'black' }, totalLabel: { visible: false, font: '10pt Sans-Serif', color: 'black', numberFormat: 'auto' }, fill: { color: 'transparent' }, needleBase: { size: '6%', color: '#1f77b4', border: { width: 0, color: 'transparent', dash: '' } }, axisWidth: '22%', axisTickLength: '30%', axisMinorTickLength: '8%', outerBorder: { width: '10%', fill: { color: '#1f77b4' }, border: { width: 0, color: 'transparent', dash: '' } } },
Note: The yaxis properties control the range and format of values, the format of grid lines, and color bands shown on the gauge axis. By default, minor grid lines are visible and major grid lines are not visible. The axisTickLength property controls the length of major grid lines, if they are visible. The axisMinorTickLength property controls the length of minor grid lines.
How to: |
The axisTickLength property defines the length of axis major grid tick marks. Note that gauge chart major axis tick marks are not visible, by default.
gaugeProperties: {
axisTickLength: length },
where:
Can be a number that defines the length in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that defines the width as a percentage of the overall gauge. The default value is '30%'.
Note: Use the yaxis majorGrid property to format the tick marks.
The following request sets the axis tick length to 50%. The y-axis major grid properties set the line style:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { axisTickLength: '50%'}, yaxis: { majorGrid: { visible:true, lineStyle: {width: 4,color: 'red',dash: '2 2'}, } } *END ENDSTYLE END
The output is:
How to: |
The axisMinorTickLength property defines the length of axis minor grid tick marks. Note that gauge chart minor axis tick marks are visible, by default.
gaugeProperties: {
axisMinorTickLength: length },
where:
Can be a number that defines the length in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that defines the width as a percentage of the overall gauge. The default value is '8%'.
Note: Use the yaxis minorGrid property to format the tick marks.
The following request sets the minor axis tick length to 30%. The y-axis minor grid properties set the line style:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { axisMinorTickLength: '30%'}, yaxis: { minorGrid: { lineStyle: {width: 2,color: 'brown',dash: '2 2'} } } *END ENDSTYLE END
The output is:
How to: |
The axisWidth property defines the width of the gauge axis.
gaugeProperties: {
axisWidth: width },
where:
Can be a number that defines the width in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that defines the width as a percentage of the overall gauge. The default value is '22%'.
Note: Use the yaxis colorBands property to change the default colors on the gauge axis.
The following request increases the width of the gauge axis to 50%:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: {axisWidth: '50%'} *END ENDSTYLE END
On the chart output, the color bands that comprise the axis occupy 50% of the gauge area:
How to: |
The fill property controls the fill color of the interior of the gauge face.
gaugeProperties: {
fill: {
color: color },
}
where:
Can be a JSON gradient definition or a string, enclosed in single quotation marks ('), that specifies a color name or numeric specification string, or a gradient definition.
Note: For information about defining colors and gradients, see, Colors and Gradients.
The following request fills the interior of the gauge face with the color 'lightBlue'.
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { fill: {color: 'lightBlue'} } *END ENDSTYLE END
The output is:
The following changes the fill color to a linear gradient that transitions from teal to cyan:
gaugeProperties: { fill: {color: 'linear-gradient(0%,0%,100%,0%, 20% teal, 95% cyan)'} },
The output is:
How to: |
The groupLabel properties control the visibility and format of the group label in a gauge chart.
gaugeProperties: { groupLabel: { visible: boolean, font: 'string', color: 'string' }, },
where:
Valid values are:
Is a string that defines the size, style, and, typeface of the label. The default value is '10pt Sans-Serif'.
Is a string that defines the color of the label. The default value is 'black'.
Note: The gaugeProperties groupLabel property does not change the text that displays for the group label. The general groupLabels property does that. The default group label is the sort field value for which the gauge is drawn.
The following request makes the group label red and bold-italic 14pt Sans-Serif:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { groupLabel: { font: 'bold italic 14pt Sans-Serif', color: 'red'} } *END ENDSTYLE END
The output is:
How to: |
The needleBase properties control the format of the base of the gauge needle.
gaugeProperties: { needleBase: { size: size, color: color, border: { width: number, color: 'string', dash: 'string' } }, },
where:
Can be a number that defines the radius in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that defines the radius as a percentage of the overall gauge. The default value is '6%'.
Can be a JSON gradient definition, or a string, enclosed in single quotation marks ('), that defines a color name or numeric specification string, or a gradient defined as a string. For information about specifying colors and gradients, see Colors and Gradients.
Defines the properties of the needle base border.
Is a number of pixels that defines the width of the border around the needle base. The default value is zero (no border).
Is a color defined by a name or numeric specification string. The default value is 'transparent' (no border).
Is a string that defines the border dash style. The default value is '', which produces a solid line. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes.
The following request makes the gauge needle base red, with a radius of 10 pixels and a green dashed border with a width of 3 pixels:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { groupLabel: {visible:false}, needleBase: { size: 10, color: 'red', border: { width: 3, color: 'green', dash: '1 1' } } } *END ENDSTYLE END
The output is:
How to: |
The outerBorder properties control the format of the outer border in a gauge chart.
gaugeProperties: { outerBorder: { width: width, fill: { color: color, }, border: { width: number, color: 'string', dash: 'string' } } },
where:
Can be a number that defines the width of the outer border ring in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that defines the outer border ring as a percentage of the overall gauge. The default value is '10%'.
Is a JSON gradient definition or a string, enclosed in single quotation marks ('), that specifies a color name or numeric specification string, or a gradient defined as a string. The default value is '#1f77b4'. For information about specifying colors and gradients, see Colors and Gradients.
Defines the properties of the border around the gauge outer border.
Is a number of pixels that defines the width of the outer border. The default value is zero (no border).
Is a color defined by a name or numeric specification string. The default value is 'transparent' (no border).
Is a string that defines the border dash style. The default value is '', which produces a solid line. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes.
The following request makes the outer border of the gauge chart 20 pixels wide, with a fill color that is a linear gradient that transitions from antique white to pink to light blue. The border of the outer border is an 8 pixel wide pink dashed line:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { groupLabel: {visible:false}, outerBorder: { width: 20, fill: {color: 'linear-gradient(0%,0,100%,0, 0 antiquewhite, 0.5 pink, 1 lightblue)'}, border: {width: 8,color: 'pink',dash: '2 2'} } } *END ENDSTYLE END
The output is:
How to: |
When a gauge includes multiple needles (multiple measures), use the secondaryNeedlesAsMarkers property to draw secondary needles as markers.
gaugeProperties: {
secondaryNeedlesAsMarkers: boolean,
},
where:
Valid values are:
Note: When secondaryNeedlesAsMarkers is true, use the series:marker property to control the size and format of the markers.
The following request draws the secondary needles as needles:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US COGS_US GROSS_PROFIT_US MSRP_US DISCOUNT_US AND COMPUTE NEWDAYS = DAYSDELAYED *20; WEEKSDELAYED = NEWDAYS/7; BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Accessories' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { groupLabel: {visible:false}, secondaryNeedlesAsMarkers: false } *END ENDSTYLE END
The output is:
The following version of the request, draws the secondary needles as markers, and sets marker shapes, sizes, borders, and colors for them. To make the markers more visible, the axis width is set to zero. Notice that series 0 is the primary needle, and is still drawn as a needle:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US COGS_US GROSS_PROFIT_US MSRP_US DISCOUNT_US AND COMPUTE NEWDAYS = DAYSDELAYED *20; WEEKSDELAYED = NEWDAYS/7; BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Accessories' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS legend: {visible:false}, gaugeProperties: { groupLabel: {visible:false}, axisWidth: 0, secondaryNeedlesAsMarkers: true }, series: [ {series: 0, color: 'red',}, {series: 1, color: 'tan',marker: {shape: 'circle', size: 12, border: {width: 1, color: 'orange'}}}, {series: 2, color: 'blue',marker: {shape: 'triangle', size: 12, border: {width: 1, color: 'black'}}}, {series: 3, color: 'orange',marker: {shape: 'diamond', size: 12, border: {width: 1, color: 'grey'}}}, {series: 4, color: 'purple',marker: {shape: 'pirateCross', size: 12, border: {width: 1, color: 'black'}}}, {series: 5, color: 'pink',marker: {shape: 'hourglass', size: 12, border: {width: 1, color: 'purple'}}}, {series: 6, color: 'limegreen',marker: {shape: 'house', size: 12, border: {width: 1, color: 'black'}}} ] *END ENDSTYLE END
The output is:
How to: |
The startAngle and endAngle properties control the start and end angles of the gauge value band. Angles are defined in degrees. Positive angles draw clockwise, negative angles draw counter clockwise. Zero will start or end the band at the 3 o'clock position. 90 will start or end the band at the 6 o'clock position. -90 specifies the 12 o'clock position.
Note: The gauge chart axis is also called a value band.
gaugeProperties: { startAngle: number, endAngle: number},
where:
Is a number that defines the angle (in degrees) at which to start the gauge value band. The default value is 135.
Is a number that defines the angle (in degrees) at which to end the gauge value band. The default value is 45.
The following request uses the default start angle (135) and end angle (45) for the gauge chart value band. The axis width is set to 2 pixels:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { groupLabel: {visible:false}, totalLabel: {visible:false}, axisWidth: 2, startAngle: 135, endAngle: 45 } *END ENDSTYLE END
The output is:
Changing the start and end angles to zero (0), makes the value band a complete circle:
How to: |
The totalLabel properties control the visibility and format of the total label in a gauge chart.
gaugeProperties: { totalLabel: { visible: boolean, font: 'string', color: 'string' numberFormat: numformat }, },
where:
Valid values are:
Is a string that defines the size, style, and, typeface of the label. The default value is '10pt Sans-Serif'.
Is a string that defines the color of the label using a color name or numeric specification string. The default value is 'black'.
For information about specifying colors, see Colors and Gradients.
Can be specified as a JSON object, a format string, or a user-defined function. The default value is 'auto'. For information on specifying number formats, see Formatting Numbers.
The following request makes the gauge chart total label visible, with a red 12pt Courier font, and a currency number format:
GRAPH FILE WF_RETAIL_LITE SUM REVENUE_US BY PRODUCT_CATEGORY WHERE PRODUCT_CATEGORY EQ 'Computers' ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH GAUGE1 ON GRAPH SET STYLE * *GRAPH_JS gaugeProperties: { groupLabel: {visible:false}, totalLabel: { visible: true,font: '12pt Courier',color: 'red', numberFormat: {mode: 'currency'} } } *END ENDSTYLE END
The output is:
WebFOCUS |