# Triple semantics: 24 h API traffic (Radial Column example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/triple-api/ · Index for agents: https://westcoast-charts.com/llms.txt

How to read: angle = time of day (15 min) · bar length = requests · bar colour = error rate (teal low → red high) · outer band = change vs last week (green up, red down) · inside = Region › Service. The ? opens the reading guide.

## Question

When did API traffic and errors rise together?

## How to read it

- 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: Hover an inner segment to find its linked time slots. Click to keep a selection; press Esc to clear it.

- Chart type: `radialColumn` (Radial Column)
- Collection: Radial Column · Radial Column · Triple semantics
- Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/triple-api.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=triple-api

## Setup

```js
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
```

## Options

```js
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()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export radial-column-triple-api.json --out radial-column-triple-api.svg --with-table` (save the options above as JSON first)