- Chart Gallery
- Linear Gauges
- Radio Scale
Radio Scale
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "linear-gauge",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#424242",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"width": null,
"height": null,
"align": "center",
"text": "Radio Scale<br><span style=\"color: #212121; font-size: 12px\">Use AM and FM labels to switch between them</span>",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 15,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": false,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#bdbdbd",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": "#bdbdbd",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 10,
"top": 10,
"bottom": 10,
"right": 10
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 100,
"top": 30,
"bottom": 0,
"right": 100
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"chartLabels": [
{
"zIndex": 50,
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#424242",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"text": "FM",
"position": "center-top",
"width": null,
"height": null,
"anchor": "center",
"offsetX": -45,
"offsetY": 95,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"zIndex": 0,
"enabled": false,
"fill": "#CECECE",
"corners": 3
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
}
},
{
"zIndex": 50,
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#dd2c00",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 600,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"text": "AM",
"position": "center-top",
"width": null,
"height": null,
"anchor": "center",
"offsetX": 45,
"offsetY": 95,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"zIndex": 0,
"enabled": true,
"fill": "#CECECE",
"corners": 3
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
}
},
{
"zIndex": 50,
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#424242",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "Click to choose station",
"position": "center",
"width": null,
"height": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 150,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {}
}
],
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"palette": {
"type": "distinct",
"items": [
"#80deea",
"#00acc1",
"#00838f",
"#29b6f6",
"#0277bd",
"#0277bd",
"#8c9eff",
"#9575cd",
"#ce93d8",
"#8e24aa"
]
},
"markerPalette": {
"items": [
"v-line"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"globalOffset": "0%",
"layout": "horizontal",
"defaultPointerType": "bar",
"data": [
{
"value": 180,
"name": "Galaxy<br/>News Radio"
},
{
"value": 571,
"name": "The Dukes<br/>of Hazzard"
},
{
"value": 780,
"name": "Frasier"
},
{
"value": 970,
"name": "The<br/>Simpsons"
}
],
"scale": 0,
"axes": [
{
"enabled": true,
"width": "1%",
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": {
"color": "#7c868e",
"thickness": 2
},
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 13,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Axis title",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true,
"format": "{%Value} MHz"
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#7c868e",
"thickness": 2
},
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#7c868e",
"thickness": 2
},
"length": 4,
"position": "outside"
},
"offset": "-15.5%",
"scale": 0
},
{
"enabled": true,
"width": "1%",
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": {
"color": "#7c868e",
"thickness": 2
},
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "bottom",
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 13,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Axis title",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": false
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#7c868e",
"thickness": 2
},
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#7c868e",
"thickness": 2
},
"length": 4,
"position": "outside"
},
"offset": "-9%",
"scale": 0
}
],
"pointers": [
{
"enabled": true,
"width": "3.5%",
"offset": "-13.5%",
"pointerType": "bar",
"dataIndex": 3,
"legendItem": {
"enabled": true
},
"normal": {
"fill": "#EAEAEA",
"stroke": {
"color": "#fff",
"thickness": 5
},
"hatchFill": "none",
"labels": {
"zIndex": 0,
"enabled": false
}
},
"hovered": {
"labels": {
"enabled": null
}
},
"selected": {
"labels": {
"enabled": null
}
},
"scale": 0
},
{
"enabled": true,
"width": "2.6%",
"offset": "-13%",
"pointerType": "marker",
"dataIndex": 0,
"legendItem": {
"enabled": true
},
"normal": {
"fill": "#212121",
"stroke": "none",
"hatchFill": "none",
"labels": {
"zIndex": 0.00001,
"enabled": true,
"hAlign": "center",
"useHtml": true,
"position": "center-bottom",
"anchor": "center-top",
"offsetX": 5,
"offsetY": 25
}
},
"hovered": {
"fill": "#545f69",
"labels": {
"enabled": true,
"fontColor": "#212121"
}
},
"selected": {
"fill": "#dd2c00",
"labels": {
"enabled": true,
"fontColor": "#dd2c00"
}
},
"scale": 0
},
{
"enabled": true,
"width": "2.6%",
"offset": "-13%",
"pointerType": "marker",
"dataIndex": 1,
"legendItem": {
"enabled": true
},
"normal": {
"fill": "#212121",
"stroke": "none",
"hatchFill": "none",
"labels": {
"zIndex": 0.00002,
"enabled": true,
"hAlign": "center",
"useHtml": true,
"position": "center-bottom",
"anchor": "center-top",
"offsetX": 5,
"offsetY": 25
}
},
"hovered": {
"fill": "#545f69",
"labels": {
"enabled": true,
"fontColor": "#212121"
}
},
"selected": {
"fill": "#dd2c00",
"labels": {
"enabled": true,
"fontColor": "#dd2c00"
}
},
"scale": 0
},
{
"enabled": true,
"width": "2.6%",
"offset": "-13%",
"pointerType": "marker",
"dataIndex": 2,
"legendItem": {
"enabled": true
},
"normal": {
"fill": "#212121",
"stroke": "none",
"hatchFill": "none",
"labels": {
"zIndex": 0.00003,
"enabled": true,
"hAlign": "center",
"useHtml": true,
"position": "center-bottom",
"anchor": "center-top",
"offsetX": 5,
"offsetY": 25
}
},
"hovered": {
"fill": "#545f69",
"labels": {
"enabled": true,
"fontColor": "#212121"
}
},
"selected": {
"fill": "#dd2c00",
"labels": {
"enabled": true,
"fontColor": "#dd2c00"
}
},
"scale": 0
},
{
"enabled": true,
"width": "2.6%",
"offset": "-13%",
"pointerType": "marker",
"dataIndex": 3,
"legendItem": {
"enabled": true
},
"normal": {
"fill": "#212121",
"stroke": "none",
"hatchFill": "none",
"labels": {
"zIndex": 0.00004,
"enabled": true,
"hAlign": "center",
"useHtml": true,
"position": "center-bottom",
"anchor": "center-top",
"offsetX": 5,
"offsetY": 25
}
},
"hovered": {
"fill": "#545f69",
"labels": {
"enabled": true,
"fontColor": "#212121"
}
},
"selected": {
"fill": "#dd2c00",
"labels": {
"enabled": true,
"fontColor": "#dd2c00"
}
},
"scale": 0
}
],
"scales": [
{
"type": "linear",
"inverted": false,
"maximum": 970,
"minimum": 180,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"explicit": [
180,
571,
780,
970
]
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
}
]
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-linear-gauge.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/light_turquoise.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('lightTurquoise');
// Set data for this sample
var fmFrequencies = [
{ value: 87.9, name: 'Forever FM' },
{ value: 92.1, name: 'Crucial FM' },
{ value: 103.1, name: 'Radio<br/>Roo' },
{ value: 107.8, name: 'Radio<br/>Norwich' }
];
var amFrequencies = [
{ value: 180, name: 'Galaxy<br/>News Radio' },
{ value: 571, name: 'The Dukes<br/>of Hazzard' },
{ value: 780, name: 'Frasier' },
{ value: 970, name: 'The<br/>Simpsons' }
];
var stationCount = Math.max(amFrequencies.length, fmFrequencies.length);
// Create gauge chart
var gauge = anychart.gauges.linear();
gauge.markerPalette().items(['v-line']);
// Set gauge title
gauge
.title()
.enabled(true)
.useHtml(true)
.padding([0, 0, 15, 0])
.text(
'Radio Scale<br>' +
'<span style="color: #212121; font-size: 12px">' +
'Use AM and FM labels to switch between them</span>'
);
// Set gauge layout, padding and turn tooltip off
gauge.layout('horizontal').padding([30, 100, 0, 100]).tooltip(false);
// Set bar point as background
var bar = gauge.bar(stationCount - 1);
bar.width('3.5%').offset('-13.5%').fill('#EAEAEA').stroke('5 #fff');
bar
.hovered()
.stroke(function () {
return this.sourceColor;
})
.fill(function () {
return this.sourceColor;
});
bar
.selected()
.stroke(function () {
return this.sourceColor;
})
.fill(function () {
return this.sourceColor;
});
// Set points
for (var i = 0; i < stationCount; i++) {
var marker = gauge.marker(i);
marker
.enabled(true)
.stroke(null)
.width('2.6%')
.offset('-13%')
.fill('#212121');
marker.hovered().fill('#545f69');
marker.selected().fill('#dd2c00');
marker
.labels()
.enabled(true)
.position('center-bottom')
.useHtml(true)
.anchor('center-top')
.offsetX(5)
.offsetY(25)
.hAlign('center')
.format(function () {
return this.getData('name');
});
marker.hovered().labels().enabled(true).fontColor('#212121');
marker.selected().labels().enabled(true).fontColor('#dd2c00');
}
// Create axis
var axisTop = gauge.axis(0);
axisTop.minorTicks().enabled(true).stroke('2 #7c868e');
axisTop.ticks().stroke('2 #7c868e');
axisTop.stroke('2 #7c868e').width('1%').offset('-15.5%');
// Create another axis on bottom position
var axisBottom = gauge.axis(1);
axisBottom.minorTicks().enabled(true).stroke('2 #7c868e');
axisBottom
.stroke('2 #7c868e')
.ticks({ stroke: '2 #7c868e' })
.labels(false)
.width('1%')
.offset('-9%')
.orientation('bottom');
// Listen point click function
gauge.listen('pointClick', function (e) {
var name = e.iterator.get('name');
if (e.target !== bar && name) {
RSNLabel.text(
'You are listening to the<br/>' +
'<span style="font-weight: 600; color: #dd2c00">"' +
name.replace('<br/>', ' ') +
'' +
'"</span><br/>station now.'
);
} else {
RSNLabel.text('Click to choose station');
}
});
// Set helper function to update gauge
function updateGauge(data, labelsPostfix) {
// Create scale
var scale = gauge.scale();
scale.minimum(data[0].value).maximum(data[data.length - 1].value);
scale.ticks(
data.map(function (a) {
return a.value;
})
);
gauge
.axis(0)
.labels()
.format('{%Value} ' + labelsPostfix);
gauge.data(data);
return gauge;
}
// Create label for switching to FM
var FMLabel = gauge.label(0);
FMLabel.text('FM')
.position('center-top')
.anchor('center')
.padding(5)
.offsetX('-45px')
.offsetY('95px');
FMLabel.background()
.enabled(false)
.fill('#CECECE')
.corners(3)
.zIndex(-1);
FMLabel.listen('click', function () {
updateGauge(fmFrequencies, 'KHz');
AMLabel.fontColor('#7c868e').fontWeight(300);
FMLabel.fontColor('#dd2c00').fontWeight(600);
RSNLabel.text('Click to choose station').fontColor('#7c868e');
FMLabel.background(true);
AMLabel.background(false);
});
// Create label for switching to AM
var AMLabel = gauge.label(1);
AMLabel.text('AM').position('center-top').anchor('center').padding(5);
AMLabel.fontColor('#dd2c00').fontWeight(600);
AMLabel.offsetX('45px').offsetY('95px');
AMLabel.background()
.enabled(true)
.fill('#CECECE')
.corners(3)
.zIndex(-1);
AMLabel.listen('click', function () {
updateGauge(amFrequencies, 'MHz');
FMLabel.fontColor('#7c868e').fontWeight(300);
AMLabel.fontColor('#dd2c00').fontWeight(600);
RSNLabel.text('Click on point');
RSNLabel.fontColor('#7c868e');
AMLabel.background(true);
FMLabel.background(false);
});
// Create label for current radio station name
var RSNLabel = gauge.label(2);
RSNLabel.text('Click to choose station')
.position('center')
.anchor('center')
.hAlign('center');
RSNLabel.offsetY('150px').useHtml(true);
// Set up gauge as AM by default
updateGauge(amFrequencies, 'MHz');
// Set container id and initiate drawing
gauge.container('container');
gauge.draw();
});
</script>
</body>
</html>
Linear Gauges are supposed to demonstrate a single measurement like temperature or battery charge, so they use not many elements as they are not necessary.
This gauge is a simulation of a radio scale which should be used as a radio station tuner. There are 4 FM stations and 4 AM stations, which are to be switched by clicking the appropriate labels. When a label is clicked, the station turns on and a warning about listeting for this station appears in the bottom of the chart. Above the station tuner you can find a station type tuner, so you can switch from the FM station types to the AM ones.