A gauge with only two answers: a green YES half and a red NO half. The needle swings from one to the other every two seconds.
Some questions have only two answers: on or off, pass or fail, go or no-go. A two-zone gauge gives that answer the weight of a dial, which reads well on a big screen or a status page. If people need the score behind the answer, use a scale with numbers.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
panX: false,
panY: false,
// a half circle, open at the bottom
startAngle: 180,
endAngle: 360
}));
// Create axis and its renderer
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
// a negative inner radius counts in from the outer edge: a band 30px wide
innerRadius: -30,
strokeOpacity: 0.1 // a faint line along the arc
});
axisRenderer.labels.template.set("forceHidden", true); // no number labels...
axisRenderer.grid.template.set("forceHidden", true); // ...and no grid lines
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0, // never panned past its ends
min: 0, // a scale from 0 (the left end) to 1 (the right end)...
max: 1,
strictMinMax: true, // ...exactly, not rounded
renderer: axisRenderer
}));
// add yes and no labels
var yesDataItem = xAxis.makeDataItem({});
yesDataItem.set("value", 0); // the left half...
yesDataItem.set("endValue", 0.5); // ...up to the middle
xAxis.createAxisRange(yesDataItem);
yesDataItem.get("label").setAll({text: "YES", forceHidden:false}); // shown, unlike the axis's own labels
// a solid band in the theme's positive color (green)
yesDataItem.get("axisFill").setAll({visible:true, fillOpacity:1, fill:root.interfaceColors.get("positive")});
var noDataItem = xAxis.makeDataItem({});
noDataItem.set("value", 1); // the right half, from the right end...
noDataItem.set("endValue", 0.5); // ...to the middle
xAxis.createAxisRange(noDataItem);
noDataItem.get("label").setAll({text: "NO", forceHidden:false});
// a solid band in the theme's negative color (red)
noDataItem.get("axisFill").setAll({visible:true, fillOpacity:1, fill:root.interfaceColors.get("negative")});
// Add clock hand
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
var axisDataItem = xAxis.makeDataItem({});
axisDataItem.set("value", 0.25); // the hand starts in the middle of the YES half
var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
sprite: am5radar.ClockHand.new(root, {
radius: am5.percent(99) // the hand reaches almost to the outer edge
})
}));
xAxis.createAxisRange(axisDataItem);
axisDataItem.get("grid").set("visible", false); // no grid line under the hand
// every 2 seconds the hand swings to the middle of the other side
let value = 0.25;
setInterval(function() {
if (value == 0.25) {
value = 0.75;
}
else {
value = 0.25;
}
axisDataItem.animate({
key: "value",
to: value,
duration: 800, // it takes 0.8 seconds...
easing: am5.ease.out(am5.ease.cubic) // ...slowing down at the end
});
}, 2000);
// Make stuff animate on load
chart.appear(1000, 100);{
"type": "RadarChart",
"settings": {
"panX": false,
"panY": false,
"startAngle": 180,
"endAngle": 360
},
"properties": {
"xAxes": [
"#axis-0"
]
},
"refs": [
{
"axis-0": {
"type": "ValueAxis",
"settings": {
"maxDeviation": 0,
"min": 0,
"max": 1,
"strictMinMax": true,
"renderer": {
"type": "AxisRendererCircular",
"settings": {
"innerRadius": -30,
"strokeOpacity": 0.1
},
"properties": {
"labels": {
"properties": {
"template": {
"settings": {
"forceHidden": true
}
}
}
},
"grid": {
"properties": {
"template": {
"settings": {
"forceHidden": true
}
}
}
}
}
}
}
}
},
{
"axisRange-0": {
"axis": "#axis-0",
"settings": {
"value": 0,
"endValue": 0.5,
"label": {
"type": "AxisLabelRadial",
"settings": {
"forceHidden": false,
"text": "YES"
}
},
"axisFill": {
"type": "Slice",
"settings": {
"visible": true,
"fillOpacity": 1,
"fill": "@root.interfaceColors.get('positive')"
}
}
},
"__parseLogic": "axisRange"
}
},
{
"axisRange-1": {
"axis": "#axis-0",
"settings": {
"value": 1,
"endValue": 0.5,
"label": {
"type": "AxisLabelRadial",
"settings": {
"forceHidden": false,
"text": "NO"
}
},
"axisFill": {
"type": "Slice",
"settings": {
"visible": true,
"fillOpacity": 1,
"fill": "@root.interfaceColors.get('negative')"
}
}
},
"__parseLogic": "axisRange"
}
},
{
"axisRange-2": {
"axis": "#axis-0",
"settings": {
"value": 0.25,
"bullet": {
"type": "AxisBullet",
"settings": {
"sprite": {
"type": "ClockHand",
"settings": {
"radius": {
"type": "Percent",
"value": 99
}
}
}
}
},
"grid": {
"type": "Grid",
"settings": {
"visible": false
}
}
},
"__parseLogic": "axisRange"
}
}
]
}
