Ops clock: incidents by hour and kind
A 24 h clock of incidents; the inner ring is the incident kind. Each kind links to the hours it happened in (datum links); hover an hour to see which kinds were involved, click a kind to show only its incidents.
Linked layers
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
const options = {
"chart": {
"type": "radialColumn",
"height": 500,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Incidents",
"data": [
7,
5,
7,
8,
6,
6,
0,
0,
1,
0,
4,
2,
7,
4,
6,
2,
3,
5,
4,
2,
6,
4,
4,
2
]
}
],
"xaxis": {
"categories": [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00"
]
},
"colors": [
"#f97316"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"fill": {
"type": "value",
"stops": [
"#fde68a",
"#f97316",
"#dc2626"
]
},
"center": {
"label": "Incidents (24 h)"
},
"link": {
"mode": "map",
"interaction": "both",
"unit": "hours"
},
"layers": [
{
"type": "donut",
"name": "Kind",
"data": [
{
"x": "Network",
"y": 20,
"link": [
1,
2,
3,
14,
15
],
"values": [
0,
5,
3,
6,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
2,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
"x": "Database",
"y": 17,
"link": [
2,
3,
4,
22,
23
],
"values": [
0,
0,
4,
2,
5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
2
]
},
{
"x": "Deploy",
"y": 13,
"link": [
10,
11,
16,
17
],
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
2,
0,
0,
0,
0,
2,
5,
0,
0,
0,
0,
0,
0
]
},
{
"x": "Capacity",
"y": 23,
"link": [
12,
13,
14,
18,
19,
20
],
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
6,
4,
2,
0,
0,
0,
4,
2,
5,
0,
0,
0
]
},
{
"x": "Security",
"y": 16,
"link": [
0,
5,
21
],
"values": [
6,
0,
0,
0,
0,
6,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
0,
0
]
}
]
}
]
}
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()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": 500,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Incidents",
"data": [
7,
5,
7,
8,
6,
6,
0,
0,
1,
0,
4,
2,
7,
4,
6,
2,
3,
5,
4,
2,
6,
4,
4,
2
]
}
],
"xaxis": {
"categories": [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00"
]
},
"colors": [
"#f97316"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"fill": {
"type": "value",
"stops": [
"#fde68a",
"#f97316",
"#dc2626"
]
},
"center": {
"label": "Incidents (24 h)"
},
"link": {
"mode": "map",
"interaction": "both",
"unit": "hours"
},
"layers": [
{
"type": "donut",
"name": "Kind",
"data": [
{
"x": "Network",
"y": 20,
"link": [
1,
2,
3,
14,
15
],
"values": [
0,
5,
3,
6,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
2,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
"x": "Database",
"y": 17,
"link": [
2,
3,
4,
22,
23
],
"values": [
0,
0,
4,
2,
5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
2
]
},
{
"x": "Deploy",
"y": 13,
"link": [
10,
11,
16,
17
],
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
2,
0,
0,
0,
0,
2,
5,
0,
0,
0,
0,
0,
0
]
},
{
"x": "Capacity",
"y": 23,
"link": [
12,
13,
14,
18,
19,
20
],
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
6,
4,
2,
0,
0,
0,
4,
2,
5,
0,
0,
0
]
},
{
"x": "Security",
"y": 16,
"link": [
0,
5,
21
],
"values": [
6,
0,
0,
0,
0,
6,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
0,
0
]
}
]
}
]
}
}
}
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-multi-clock.json --out radial-column-multi-clock.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/multi-clock/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?