# Ops clock: incidents by hour and kind (Radial Column example)

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

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.

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

## 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": 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()
```

## 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-multi-clock.json --out radial-column-multi-clock.svg --with-table` (save the options above as JSON first)