Server load live: gauge now, ring = last 60 minutes
The gauge in the middle is the current load; the column ring is the same metric over the last 60 minutes, newest at the dashed “now” tick. Every tick the gauge animates and the oldest minute rolls off the ring (simulated; pauses while the tab is hidden).
Time rings & goals
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
"chart": {
"type": "radialColumn",
"height": 560,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Load",
"data": [
34,
40,
48,
55,
62,
66,
68,
66,
60,
51,
49,
46,
43,
41,
41,
43,
45,
48,
49,
58,
63,
65,
63,
58,
51,
43,
35,
28,
32,
38,
45,
51,
57,
60,
60,
57,
50,
49,
46,
42,
38,
35,
35,
35,
37,
39,
48,
55,
60,
60,
57,
51,
43,
34,
25,
27,
30,
35,
40,
46
]
}
],
"xaxis": {
"categories": [
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "mean",
"innerRadius": 0.62,
"startAngle": -150,
"endAngle": 150,
"hole": "70%",
"fill": {
"type": "value",
"stops": [
"#22c55e",
"#a3e635",
"#f59e0b",
"#ef4444"
]
},
"valueAxis": {
"min": 0,
"max": 100,
"labels": {
"formatter": function (v) { return v + '%' }
}
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return /0$/.test(c) && o.index > 2 && o.index < 55 ? c : '' }
},
"link": {
"mode": "auto",
"unit": "minutes"
},
"layers": [
{
"type": "gauge",
"name": "Load now",
"follow": "Load",
"startAngle": -125,
"endAngle": 125,
"thickness": 16,
"formatter": function (v) { return Math.round(v) + '%' },
"bands": [
{
"to": 55,
"color": "#22c55e"
},
{
"to": 75,
"color": "#f59e0b"
},
{
"to": 100,
"color": "#ef4444"
}
]
}
]
}
}
}import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 560,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Load",
"data": [
34,
40,
48,
55,
62,
66,
68,
66,
60,
51,
49,
46,
43,
41,
41,
43,
45,
48,
49,
58,
63,
65,
63,
58,
51,
43,
35,
28,
32,
38,
45,
51,
57,
60,
60,
57,
50,
49,
46,
42,
38,
35,
35,
35,
37,
39,
48,
55,
60,
60,
57,
51,
43,
34,
25,
27,
30,
35,
40,
46
]
}
],
"xaxis": {
"categories": [
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "mean",
"innerRadius": 0.62,
"startAngle": -150,
"endAngle": 150,
"hole": "70%",
"fill": {
"type": "value",
"stops": [
"#22c55e",
"#a3e635",
"#f59e0b",
"#ef4444"
]
},
"valueAxis": {
"min": 0,
"max": 100,
"labels": {
"formatter": function (v) { return v + '%' }
}
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return /0$/.test(c) && o.index > 2 && o.index < 55 ? c : '' }
},
"link": {
"mode": "auto",
"unit": "minutes"
},
"layers": [
{
"type": "gauge",
"name": "Load now",
"follow": "Load",
"startAngle": -125,
"endAngle": 125,
"thickness": 16,
"formatter": function (v) { return Math.round(v) + '%' },
"bands": [
{
"to": 55,
"color": "#22c55e"
},
{
"to": 75,
"color": "#f59e0b"
},
{
"to": 100,
"color": "#ef4444"
}
]
}
]
}
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export radial-column-gauge-live.json --out radial-column-gauge-live.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/radial-column/gauge-live/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?