Triple semantics: 24 h API traffic
When did API traffic and errors rise together?
Triple semantics
How to read this example
- Angle
- Time of day, in 15-minute slots.
- Bars
- Length shows requests; colour shows error rate.
- Rim & centre
- Change from last week, with Region › Service composition inside.
Try thisHover an inner segment to find its linked time slots. Click to keep a selection; press Esc to clear it.
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": 540,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Requests",
"data": [
{
"x": "00:00",
"y": 162,
"meta": {
"err": 0.6,
"wow": 6
}
},
{
"x": "00:15",
"y": 171,
"meta": {
"err": 1.6,
"wow": 8
}
},
{
"x": "00:30",
"y": 171,
"meta": {
"err": 2.5,
"wow": 10
}
},
{
"x": "00:45",
"y": 153,
"meta": {
"err": 3.1,
"wow": 11
}
},
{
"x": "01:00",
"y": 153,
"meta": {
"err": 3.4,
"wow": 11
}
},
{
"x": "01:15",
"y": 153,
"meta": {
"err": 3.3,
"wow": 11
}
},
{
"x": "01:30",
"y": 144,
"meta": {
"err": 2.8,
"wow": 11
}
},
{
"x": "01:45",
"y": 135,
"meta": {
"err": 2.1,
"wow": 11
}
},
{
"x": "02:00",
"y": 126,
"meta": {
"err": 1.1,
"wow": 11
}
},
{
"x": "02:15",
"y": 117,
"meta": {
"err": 1.1,
"wow": 11
}
},
{
"x": "02:30",
"y": 117,
"meta": {
"err": 2.1,
"wow": 12
}
},
{
"x": "02:45",
"y": 99,
"meta": {
"err": 2.8,
"wow": 13
}
},
{
"x": "03:00",
"y": 99,
"meta": {
"err": 3.3,
"wow": 14
}
},
{
"x": "03:15",
"y": 99,
"meta": {
"err": 3.4,
"wow": 15
}
},
{
"x": "03:30",
"y": 99,
"meta": {
"err": 3.1,
"wow": 16
}
},
{
"x": "03:45",
"y": 108,
"meta": {
"err": 2.5,
"wow": 17
}
},
{
"x": "04:00",
"y": 126,
"meta": {
"err": 1.6,
"wow": 17
}
},
{
"x": "04:15",
"y": 135,
"meta": {
"err": 0.6,
"wow": 17
}
},
{
"x": "04:30",
"y": 144,
"meta": {
"err": 1.6,
"wow": 15
}
},
{
"x": "04:45",
"y": 153,
"meta": {
"err": 2.5,
"wow": 13
}
},
{
"x": "05:00",
"y": 171,
"meta": {
"err": 3.1,
"wow": 11
}
},
{
"x": "05:15",
"y": 180,
"meta": {
"err": 3.4,
"wow": 7
}
},
{
"x": "05:30",
"y": 180,
"meta": {
"err": 3.3,
"wow": 3
}
},
{
"x": "05:45",
"y": 198,
"meta": {
"err": 2.8,
"wow": -1
}
},
{
"x": "06:00",
"y": 198,
"meta": {
"err": 2.1,
"wow": -6
}
},
{
"x": "06:15",
"y": 243,
"meta": {
"err": 1.1,
"wow": -10
}
},
{
"x": "06:30",
"y": 279,
"meta": {
"err": 1.1,
"wow": -14
}
},
{
"x": "06:45",
"y": 315,
"meta": {
"err": 2.1,
"wow": -17
}
},
{
"x": "07:00",
"y": 342,
"meta": {
"err": 2.9,
"wow": -20
}
},
{
"x": "07:15",
"y": 378,
"meta": {
"err": 3.3,
"wow": -21
}
},
{
"x": "07:30",
"y": 405,
"meta": {
"err": 3.4,
"wow": -21
}
},
{
"x": "07:45",
"y": 423,
"meta": {
"err": 3.1,
"wow": -21
}
},
{
"x": "08:00",
"y": 450,
"meta": {
"err": 2.5,
"wow": -20
}
},
{
"x": "08:15",
"y": 450,
"meta": {
"err": 1.6,
"wow": -18
}
},
{
"x": "08:30",
"y": 441,
"meta": {
"err": 0.6,
"wow": -16
}
},
{
"x": "08:45",
"y": 405,
"meta": {
"err": 1.6,
"wow": -14
}
},
{
"x": "09:00",
"y": 378,
"meta": {
"err": 2.5,
"wow": -11
}
},
{
"x": "09:15",
"y": 387,
"meta": {
"err": 3.1,
"wow": -9
}
},
{
"x": "09:30",
"y": 342,
"meta": {
"err": 3.4,
"wow": -8
}
},
{
"x": "09:45",
"y": 342,
"meta": {
"err": 3.3,
"wow": -6
}
},
{
"x": "10:00",
"y": 315,
"meta": {
"err": 2.8,
"wow": -5
}
},
{
"x": "10:15",
"y": 315,
"meta": {
"err": 2,
"wow": -5
}
},
{
"x": "10:30",
"y": 288,
"meta": {
"err": 1.1,
"wow": -4
}
},
{
"x": "10:45",
"y": 270,
"meta": {
"err": 1.2,
"wow": -4
}
},
{
"x": "11:00",
"y": 261,
"meta": {
"err": 2.1,
"wow": -3
}
},
{
"x": "11:15",
"y": 297,
"meta": {
"err": 2.9,
"wow": -2
}
},
{
"x": "11:30",
"y": 315,
"meta": {
"err": 3.3,
"wow": 0
}
},
{
"x": "11:45",
"y": 333,
"meta": {
"err": 3.4,
"wow": 2
}
},
{
"x": "12:00",
"y": 315,
"meta": {
"err": 3.1,
"wow": 4
}
},
{
"x": "12:15",
"y": 315,
"meta": {
"err": 2.4,
"wow": 7
}
},
{
"x": "12:30",
"y": 378,
"meta": {
"err": 1.6,
"wow": 10
}
},
{
"x": "12:45",
"y": 423,
"meta": {
"err": 0.7,
"wow": 14
}
},
{
"x": "13:00",
"y": 477,
"meta": {
"err": 1.7,
"wow": 17
}
},
{
"x": "13:15",
"y": 486,
"meta": {
"err": 2.5,
"wow": 20
}
},
{
"x": "13:30",
"y": 531,
"meta": {
"err": 3.1,
"wow": 22
}
},
{
"x": "13:45",
"y": 585,
"meta": {
"err": 3.4,
"wow": 23
}
},
{
"x": "14:00",
"y": 630,
"meta": {
"err": 3.3,
"wow": 24
}
},
{
"x": "14:15",
"y": 630,
"meta": {
"err": 2.8,
"wow": 23
}
},
{
"x": "14:30",
"y": 603,
"meta": {
"err": 2,
"wow": 22
}
},
{
"x": "14:45",
"y": 621,
"meta": {
"err": 1,
"wow": 19
}
},
{
"x": "15:00",
"y": 567,
"meta": {
"err": 1.2,
"wow": 16
}
},
{
"x": "15:15",
"y": 540,
"meta": {
"err": 2.1,
"wow": 12
}
},
{
"x": "15:30",
"y": 504,
"meta": {
"err": 2.9,
"wow": 8
}
},
{
"x": "15:45",
"y": 441,
"meta": {
"err": 3.3,
"wow": 4
}
},
{
"x": "16:00",
"y": 396,
"meta": {
"err": 3.4,
"wow": 0
}
},
{
"x": "16:15",
"y": 369,
"meta": {
"err": 3.1,
"wow": -3
}
},
{
"x": "16:30",
"y": 315,
"meta": {
"err": 2.4,
"wow": -6
}
},
{
"x": "16:45",
"y": 279,
"meta": {
"err": 1.5,
"wow": -8
}
},
{
"x": "17:00",
"y": 252,
"meta": {
"err": 0.7,
"wow": -10
}
},
{
"x": "17:15",
"y": 216,
"meta": {
"err": 1.7,
"wow": -11
}
},
{
"x": "17:30",
"y": 180,
"meta": {
"err": 2.5,
"wow": -11
}
},
{
"x": "17:45",
"y": 144,
"meta": {
"err": 6.2,
"wow": -11
}
},
{
"x": "18:00",
"y": 117,
"meta": {
"err": 6.7,
"wow": -11
}
},
{
"x": "18:15",
"y": 99,
"meta": {
"err": 6.5,
"wow": -11
}
},
{
"x": "18:30",
"y": 108,
"meta": {
"err": 5.4,
"wow": -11
}
},
{
"x": "18:45",
"y": 108,
"meta": {
"err": 3.7,
"wow": -11
}
},
{
"x": "19:00",
"y": 108,
"meta": {
"err": 1.5,
"wow": -12
}
},
{
"x": "19:15",
"y": 108,
"meta": {
"err": 1.9,
"wow": -13
}
},
{
"x": "19:30",
"y": 117,
"meta": {
"err": 4,
"wow": -14
}
},
{
"x": "19:45",
"y": 117,
"meta": {
"err": 5.6,
"wow": -15
}
},
{
"x": "20:00",
"y": 126,
"meta": {
"err": 3.3,
"wow": -16
}
},
{
"x": "20:15",
"y": 135,
"meta": {
"err": 3.4,
"wow": -17
}
},
{
"x": "20:30",
"y": 135,
"meta": {
"err": 3.1,
"wow": -17
}
},
{
"x": "20:45",
"y": 153,
"meta": {
"err": 2.4,
"wow": -17
}
},
{
"x": "21:00",
"y": 162,
"meta": {
"err": 1.5,
"wow": -15
}
},
{
"x": "21:15",
"y": 171,
"meta": {
"err": 0.7,
"wow": -13
}
},
{
"x": "21:30",
"y": 180,
"meta": {
"err": 1.7,
"wow": -11
}
},
{
"x": "21:45",
"y": 189,
"meta": {
"err": 2.6,
"wow": -7
}
},
{
"x": "22:00",
"y": 198,
"meta": {
"err": 3.1,
"wow": -3
}
},
{
"x": "22:15",
"y": 198,
"meta": {
"err": 3.4,
"wow": 2
}
},
{
"x": "22:30",
"y": 207,
"meta": {
"err": 3.3,
"wow": 6
}
},
{
"x": "22:45",
"y": 207,
"meta": {
"err": 2.8,
"wow": 10
}
},
{
"x": "23:00",
"y": 207,
"meta": {
"err": 2,
"wow": 14
}
},
{
"x": "23:15",
"y": 207,
"meta": {
"err": 1,
"wow": 17
}
},
{
"x": "23:30",
"y": 216,
"meta": {
"err": 1.2,
"wow": 20
}
},
{
"x": "23:45",
"y": 207,
"meta": {
"err": 2.2,
"wow": 21
}
}
]
}
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.56,
// Full configuration available through Raw or Copy.
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": 540,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Requests",
"data": [
{
"x": "00:00",
"y": 162,
"meta": {
"err": 0.6,
"wow": 6
}
},
{
"x": "00:15",
"y": 171,
"meta": {
"err": 1.6,
"wow": 8
}
},
{
"x": "00:30",
"y": 171,
"meta": {
"err": 2.5,
"wow": 10
}
},
{
"x": "00:45",
"y": 153,
"meta": {
"err": 3.1,
"wow": 11
}
},
{
"x": "01:00",
"y": 153,
"meta": {
"err": 3.4,
"wow": 11
}
},
{
"x": "01:15",
"y": 153,
"meta": {
"err": 3.3,
"wow": 11
}
},
{
"x": "01:30",
"y": 144,
"meta": {
"err": 2.8,
"wow": 11
}
},
{
"x": "01:45",
"y": 135,
"meta": {
"err": 2.1,
"wow": 11
}
},
{
"x": "02:00",
"y": 126,
"meta": {
"err": 1.1,
"wow": 11
}
},
{
"x": "02:15",
"y": 117,
"meta": {
"err": 1.1,
"wow": 11
}
},
{
"x": "02:30",
"y": 117,
"meta": {
"err": 2.1,
"wow": 12
}
},
{
"x": "02:45",
"y": 99,
"meta": {
"err": 2.8,
"wow": 13
}
},
{
"x": "03:00",
"y": 99,
"meta": {
"err": 3.3,
"wow": 14
}
},
{
"x": "03:15",
"y": 99,
"meta": {
"err": 3.4,
"wow": 15
}
},
{
"x": "03:30",
"y": 99,
"meta": {
"err": 3.1,
"wow": 16
}
},
{
"x": "03:45",
"y": 108,
"meta": {
"err": 2.5,
"wow": 17
}
},
{
"x": "04:00",
"y": 126,
"meta": {
"err": 1.6,
"wow": 17
}
},
{
"x": "04:15",
"y": 135,
"meta": {
"err": 0.6,
"wow": 17
}
},
{
"x": "04:30",
"y": 144,
"meta": {
"err": 1.6,
"wow": 15
}
},
{
"x": "04:45",
"y": 153,
"meta": {
"err": 2.5,
"wow": 13
}
},
{
"x": "05:00",
"y": 171,
"meta": {
"err": 3.1,
"wow": 11
}
},
{
"x": "05:15",
"y": 180,
"meta": {
"err": 3.4,
"wow": 7
}
},
{
"x": "05:30",
"y": 180,
"meta": {
"err": 3.3,
"wow": 3
}
},
{
"x": "05:45",
"y": 198,
"meta": {
"err": 2.8,
"wow": -1
}
},
{
"x": "06:00",
"y": 198,
"meta": {
"err": 2.1,
"wow": -6
}
},
{
"x": "06:15",
"y": 243,
"meta": {
"err": 1.1,
"wow": -10
}
},
{
"x": "06:30",
"y": 279,
"meta": {
"err": 1.1,
"wow": -14
}
},
{
"x": "06:45",
"y": 315,
"meta": {
"err": 2.1,
"wow": -17
}
},
{
"x": "07:00",
"y": 342,
"meta": {
"err": 2.9,
"wow": -20
}
},
{
"x": "07:15",
"y": 378,
"meta": {
"err": 3.3,
"wow": -21
}
},
{
"x": "07:30",
"y": 405,
"meta": {
"err": 3.4,
"wow": -21
}
},
{
"x": "07:45",
"y": 423,
"meta": {
"err": 3.1,
"wow": -21
}
},
{
"x": "08:00",
"y": 450,
"meta": {
"err": 2.5,
"wow": -20
}
},
{
"x": "08:15",
"y": 450,
"meta": {
"err": 1.6,
"wow": -18
}
},
{
"x": "08:30",
"y": 441,
"meta": {
"err": 0.6,
"wow": -16
}
},
{
"x": "08:45",
"y": 405,
"meta": {
"err": 1.6,
"wow": -14
}
},
{
"x": "09:00",
"y": 378,
"meta": {
"err": 2.5,
"wow": -11
}
},
{
"x": "09:15",
"y": 387,
"meta": {
"err": 3.1,
"wow": -9
}
},
{
"x": "09:30",
"y": 342,
"meta": {
"err": 3.4,
"wow": -8
}
},
{
"x": "09:45",
"y": 342,
"meta": {
"err": 3.3,
"wow": -6
}
},
{
"x": "10:00",
"y": 315,
"meta": {
"err": 2.8,
"wow": -5
}
},
{
"x": "10:15",
"y": 315,
"meta": {
"err": 2,
"wow": -5
}
},
{
"x": "10:30",
"y": 288,
"meta": {
"err": 1.1,
"wow": -4
}
},
{
"x": "10:45",
"y": 270,
"meta": {
"err": 1.2,
"wow": -4
}
},
{
"x": "11:00",
"y": 261,
"meta": {
"err": 2.1,
"wow": -3
}
},
{
"x": "11:15",
"y": 297,
"meta": {
"err": 2.9,
"wow": -2
}
},
{
"x": "11:30",
"y": 315,
"meta": {
"err": 3.3,
"wow": 0
}
},
{
"x": "11:45",
"y": 333,
"meta": {
"err": 3.4,
"wow": 2
}
},
{
"x": "12:00",
"y": 315,
"meta": {
"err": 3.1,
"wow": 4
}
},
{
"x": "12:15",
"y": 315,
"meta": {
"err": 2.4,
"wow": 7
}
},
{
"x": "12:30",
"y": 378,
"meta": {
"err": 1.6,
"wow": 10
}
},
{
"x": "12:45",
"y": 423,
"meta": {
"err": 0.7,
"wow": 14
}
},
{
"x": "13:00",
"y": 477,
"meta": {
"err": 1.7,
"wow": 17
}
},
{
"x": "13:15",
"y": 486,
"meta": {
"err": 2.5,
"wow": 20
}
},
{
"x": "13:30",
"y": 531,
"meta": {
"err": 3.1,
"wow": 22
}
},
{
"x": "13:45",
"y": 585,
"meta": {
"err": 3.4,
"wow": 23
}
},
{
"x": "14:00",
"y": 630,
"meta": {
"err": 3.3,
"wow": 24
}
},
{
"x": "14:15",
"y": 630,
"meta": {
"err": 2.8,
"wow": 23
}
},
{
"x": "14:30",
"y": 603,
"meta": {
"err": 2,
"wow": 22
}
},
{
"x": "14:45",
"y": 621,
"meta": {
"err": 1,
"wow": 19
}
},
{
"x": "15:00",
"y": 567,
"meta": {
"err": 1.2,
"wow": 16
}
},
{
"x": "15:15",
"y": 540,
"meta": {
"err": 2.1,
"wow": 12
}
},
{
"x": "15:30",
"y": 504,
"meta": {
"err": 2.9,
"wow": 8
}
},
{
"x": "15:45",
"y": 441,
"meta": {
"err": 3.3,
"wow": 4
}
},
{
"x": "16:00",
"y": 396,
"meta": {
"err": 3.4,
"wow": 0
}
},
{
"x": "16:15",
"y": 369,
"meta": {
"err": 3.1,
"wow": -3
}
},
{
"x": "16:30",
"y": 315,
"meta": {
"err": 2.4,
"wow": -6
}
},
{
"x": "16:45",
"y": 279,
"meta": {
"err": 1.5,
"wow": -8
}
},
{
"x": "17:00",
"y": 252,
"meta": {
"err": 0.7,
"wow": -10
}
},
{
"x": "17:15",
"y": 216,
"meta": {
"err": 1.7,
"wow": -11
}
},
{
"x": "17:30",
"y": 180,
"meta": {
"err": 2.5,
"wow": -11
}
},
{
"x": "17:45",
"y": 144,
"meta": {
"err": 6.2,
"wow": -11
}
},
{
"x": "18:00",
"y": 117,
"meta": {
"err": 6.7,
"wow": -11
}
},
{
"x": "18:15",
"y": 99,
"meta": {
"err": 6.5,
"wow": -11
}
},
{
"x": "18:30",
"y": 108,
"meta": {
"err": 5.4,
"wow": -11
}
},
{
"x": "18:45",
"y": 108,
"meta": {
"err": 3.7,
"wow": -11
}
},
{
"x": "19:00",
"y": 108,
"meta": {
"err": 1.5,
"wow": -12
}
},
{
"x": "19:15",
"y": 108,
"meta": {
"err": 1.9,
"wow": -13
}
},
{
"x": "19:30",
"y": 117,
"meta": {
"err": 4,
"wow": -14
}
},
{
"x": "19:45",
"y": 117,
"meta": {
"err": 5.6,
"wow": -15
}
},
{
"x": "20:00",
"y": 126,
"meta": {
"err": 3.3,
"wow": -16
}
},
{
"x": "20:15",
"y": 135,
"meta": {
"err": 3.4,
"wow": -17
}
},
{
"x": "20:30",
"y": 135,
"meta": {
"err": 3.1,
"wow": -17
}
},
{
"x": "20:45",
"y": 153,
"meta": {
"err": 2.4,
"wow": -17
}
},
{
"x": "21:00",
"y": 162,
"meta": {
"err": 1.5,
"wow": -15
}
},
{
"x": "21:15",
"y": 171,
"meta": {
"err": 0.7,
"wow": -13
}
},
{
"x": "21:30",
"y": 180,
"meta": {
"err": 1.7,
"wow": -11
}
},
{
"x": "21:45",
"y": 189,
"meta": {
"err": 2.6,
"wow": -7
}
},
{
"x": "22:00",
"y": 198,
"meta": {
"err": 3.1,
"wow": -3
}
},
{
"x": "22:15",
"y": 198,
"meta": {
"err": 3.4,
"wow": 2
}
},
{
"x": "22:30",
"y": 207,
"meta": {
"err": 3.3,
"wow": 6
}
},
{
"x": "22:45",
"y": 207,
"meta": {
"err": 2.8,
"wow": 10
}
},
{
"x": "23:00",
"y": 207,
"meta": {
"err": 2,
"wow": 14
}
},
{
"x": "23:15",
"y": 207,
"meta": {
"err": 1,
"wow": 17
}
},
{
"x": "23:30",
"y": 216,
"meta": {
"err": 1.2,
"wow": 20
}
},
{
"x": "23:45",
"y": 207,
"meta": {
"err": 2.2,
"wow": 21
}
}
]
}
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.56,
"center": {
"label": "Requests"
},
"encode": {
"angle": "Time of day (15 min)",
"color": {
"field": "err",
"name": "Error rate",
"unit": "%"
},
"delta": {
"field": "wow",
"name": "vs last week",
"unit": "%",
"style": "band"
},
"guide": {
"show": true,
"open": false
}
},
"link": "none",
"layers": [
{
"type": "sunburst",
"name": "Region › Service",
"data": [
{
"x": "EU",
"children": [
{
"x": "Auth",
"y": 10
},
{
"x": "Search",
"y": 25
},
{
"x": "Checkout",
"y": 40
}
]
},
{
"x": "US",
"children": [
{
"x": "Auth",
"y": 31
},
{
"x": "Search",
"y": 46
},
{
"x": "Checkout",
"y": 22
},
{
"x": "Media",
"y": 37
}
]
},
{
"x": "APAC",
"children": [
{
"x": "Search",
"y": 13
},
{
"x": "Media",
"y": 28
}
]
}
]
}
]
}
}
}
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-triple-api.json --out radial-column-triple-api.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/triple-api/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?