Datetime scatter
Incidents over time by severity.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "scatter",
zoom: {
enabled: true,
type: "xy"
},
toolbar: {
show: false
}
},
series: [
{
name: "Minor",
data: [
[1769644800000, 49],
[1772323200000, 45],
[1774224000000, 45],
[1776211200000, 77],
[1768262400000, 33],
[1776297600000, 16],
[1776211200000, 105],
[1775606400000, 96],
[1770249600000, 8],
[1771891200000, 78],
[1774051200000, 30],
[1769472000000, 80],
[1770508800000, 19],
[1771459200000, 17],
[1773360000000, 77],
[1773705600000, 38],
[1770163200000, 11],
[1769299200000, 14],
[1777593600000, 99],
[1771200000000, 116],
[1772236800000, 90],
[1767571200000, 54],
[1769817600000, 102],
[1777593600000, 63],
[1775174400000, 117],
[1770768000000, 25],
[1768003200000, 68],
[1771113600000, 74],
[1770768000000, 79],
[1773705600000, 43]
]
},
{
name: "Major",
data: [
[1771891200000, 58],
[1773360000000, 98],
[1771286400000, 40],
[1774310400000, 103],
[1772755200000, 103],
[1774742400000, 46],
[1776297600000, 104],
[1768003200000, 135],
[1776384000000, 82],
[1771632000000, 72],
[1776816000000, 118],
[1768348800000, 111],
[1777075200000, 86],
[1777161600000, 61],
[1770854400000, 119],
[1768176000000, 179],
[1774396800000, 92],
[1769644800000, 135],
[1776297600000, 10],
[1775174400000, 103],
[1769126400000, 56],
[1771113600000, 145]
]
},
{
name: "Critical",
data: [
[1777075200000, 192],
[1768780800000, 172],
[1773100800000, 134],
[1777593600000, 217],
[1771718400000, 187],
[1772150400000, 74],
[1770249600000, 38],
[1775088000000, 132],
[1769558400000, 93],
[1769558400000, 42],
[1773964800000, 61],
[1772150400000, 238],
[1774656000000, 33],
[1776124800000, 219]
]
}
],
xaxis: {
type: "datetime"
},
yaxis: {
title: {
text: "Minutes to resolve"
}
},
markers: {
size: 5
},
title: {
text: "Incidents by resolution time"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "scatter",
zoom: {
enabled: true,
type: "xy"
},
toolbar: {
show: false
}
},
series: [
{
name: "Minor",
data: [
[1769644800000, 49],
[1772323200000, 45],
[1774224000000, 45],
[1776211200000, 77],
[1768262400000, 33],
[1776297600000, 16],
[1776211200000, 105],
[1775606400000, 96],
[1770249600000, 8],
[1771891200000, 78],
[1774051200000, 30],
[1769472000000, 80],
[1770508800000, 19],
[1771459200000, 17],
[1773360000000, 77],
[1773705600000, 38],
[1770163200000, 11],
[1769299200000, 14],
[1777593600000, 99],
[1771200000000, 116],
[1772236800000, 90],
[1767571200000, 54],
[1769817600000, 102],
[1777593600000, 63],
[1775174400000, 117],
[1770768000000, 25],
[1768003200000, 68],
[1771113600000, 74],
[1770768000000, 79],
[1773705600000, 43]
]
},
{
name: "Major",
data: [
[1771891200000, 58],
[1773360000000, 98],
[1771286400000, 40],
[1774310400000, 103],
[1772755200000, 103],
[1774742400000, 46],
[1776297600000, 104],
[1768003200000, 135],
[1776384000000, 82],
[1771632000000, 72],
[1776816000000, 118],
[1768348800000, 111],
[1777075200000, 86],
[1777161600000, 61],
[1770854400000, 119],
[1768176000000, 179],
[1774396800000, 92],
[1769644800000, 135],
[1776297600000, 10],
[1775174400000, 103],
[1769126400000, 56],
[1771113600000, 145]
]
},
{
name: "Critical",
data: [
[1777075200000, 192],
[1768780800000, 172],
[1773100800000, 134],
[1777593600000, 217],
[1771718400000, 187],
[1772150400000, 74],
[1770249600000, 38],
[1775088000000, 132],
[1769558400000, 93],
[1769558400000, 42],
[1773964800000, 61],
[1772150400000, 238],
[1774656000000, 33],
[1776124800000, 219]
]
}
],
xaxis: {
type: "datetime"
},
yaxis: {
title: {
text: "Minutes to resolve"
}
},
markers: {
size: 5
},
title: {
text: "Incidents by resolution time"
},
theme: {
mode: "light",
preset: "coastal"
}
}
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 scatter-scatter-datetime.json --out scatter-scatter-datetime.svg --with-table Public 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/scatter/scatter-datetime/index.md …