Irregular time series
Three series sampled at different, uneven timestamps.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "area",
stacked: false,
toolbar: {
show: false
}
},
series: [
{
name: "Probe A",
data: [
[1767830400000, 58],
[1768435200000, 64],
[1768521600000, 56],
[1769126400000, 58],
[1769212800000, 61],
[1769299200000, 65],
[1769472000000, 69],
[1769817600000, 57],
[1769990400000, 72],
[1770076800000, 48],
[1770854400000, 53],
[1771113600000, 60],
[1771718400000, 55],
[1772496000000, 55],
[1773187200000, 59],
[1773964800000, 65],
[1774310400000, 75],
[1774828800000, 68],
[1775433600000, 55],
[1776211200000, 68],
[1776988800000, 48],
[1777334400000, 56],
[1777939200000, 54],
[1778544000000, 59],
[1778889600000, 59],
[1778976000000, 67],
[1779148800000, 57],
[1779580800000, 57]
]
},
{
name: "Probe B",
data: [
[1768003200000, 49],
[1768694400000, 42],
[1768867200000, 45],
[1769472000000, 42],
[1770249600000, 45],
[1770508800000, 50],
[1770681600000, 42],
[1771286400000, 41],
[1771632000000, 46],
[1771804800000, 42],
[1771891200000, 48],
[1772236800000, 45],
[1772323200000, 45],
[1772496000000, 54],
[1773100800000, 45],
[1773878400000, 48],
[1774396800000, 42],
[1774915200000, 45],
[1775347200000, 46],
[1775952000000, 40]
]
},
{
name: "Probe C",
data: [
[1768348800000, 29],
[1768867200000, 32],
[1769558400000, 33],
[1769731200000, 31],
[1770249600000, 27],
[1770422400000, 31],
[1770940800000, 29],
[1771632000000, 30],
[1771718400000, 27],
[1771891200000, 33],
[1772582400000, 29],
[1772841600000, 32],
[1773100800000, 29],
[1773446400000, 32],
[1773532800000, 35],
[1774224000000, 29],
[1774310400000, 31],
[1775001600000, 33],
[1775606400000, 27],
[1776038400000, 30],
[1776470400000, 30],
[1776816000000, 30],
[1777248000000, 32],
[1777766400000, 23],
[1778112000000, 32],
[1778803200000, 29],
[1779235200000, 27],
[1779926400000, 31],
[1780617600000, 31],
[1780963200000, 29],
[1781049600000, 29],
[1781308800000, 23],
[1782000000000, 28],
[1782432000000, 27],
[1782950400000, 32]
]
}
],
xaxis: {
type: "datetime"
},
dataLabels: {
enabled: false
},
fill: {
opacity: 0.25,
type: "solid"
},
stroke: {
width: 2
},
markers: {
size: 2
},
title: {
text: "Water quality readings (uneven intervals)"
},
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: "area",
stacked: false,
toolbar: {
show: false
}
},
series: [
{
name: "Probe A",
data: [
[1767830400000, 58],
[1768435200000, 64],
[1768521600000, 56],
[1769126400000, 58],
[1769212800000, 61],
[1769299200000, 65],
[1769472000000, 69],
[1769817600000, 57],
[1769990400000, 72],
[1770076800000, 48],
[1770854400000, 53],
[1771113600000, 60],
[1771718400000, 55],
[1772496000000, 55],
[1773187200000, 59],
[1773964800000, 65],
[1774310400000, 75],
[1774828800000, 68],
[1775433600000, 55],
[1776211200000, 68],
[1776988800000, 48],
[1777334400000, 56],
[1777939200000, 54],
[1778544000000, 59],
[1778889600000, 59],
[1778976000000, 67],
[1779148800000, 57],
[1779580800000, 57]
]
},
{
name: "Probe B",
data: [
[1768003200000, 49],
[1768694400000, 42],
[1768867200000, 45],
[1769472000000, 42],
[1770249600000, 45],
[1770508800000, 50],
[1770681600000, 42],
[1771286400000, 41],
[1771632000000, 46],
[1771804800000, 42],
[1771891200000, 48],
[1772236800000, 45],
[1772323200000, 45],
[1772496000000, 54],
[1773100800000, 45],
[1773878400000, 48],
[1774396800000, 42],
[1774915200000, 45],
[1775347200000, 46],
[1775952000000, 40]
]
},
{
name: "Probe C",
data: [
[1768348800000, 29],
[1768867200000, 32],
[1769558400000, 33],
[1769731200000, 31],
[1770249600000, 27],
[1770422400000, 31],
[1770940800000, 29],
[1771632000000, 30],
[1771718400000, 27],
[1771891200000, 33],
[1772582400000, 29],
[1772841600000, 32],
[1773100800000, 29],
[1773446400000, 32],
[1773532800000, 35],
[1774224000000, 29],
[1774310400000, 31],
[1775001600000, 33],
[1775606400000, 27],
[1776038400000, 30],
[1776470400000, 30],
[1776816000000, 30],
[1777248000000, 32],
[1777766400000, 23],
[1778112000000, 32],
[1778803200000, 29],
[1779235200000, 27],
[1779926400000, 31],
[1780617600000, 31],
[1780963200000, 29],
[1781049600000, 29],
[1781308800000, 23],
[1782000000000, 28],
[1782432000000, 27],
[1782950400000, 32]
]
}
],
xaxis: {
type: "datetime"
},
dataLabels: {
enabled: false
},
fill: {
opacity: 0.25,
type: "solid"
},
stroke: {
width: 2
},
markers: {
size: 2
},
title: {
text: "Water quality readings (uneven intervals)"
},
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 area-timeseries-with-irregular-data.json --out area-timeseries-with-irregular-data.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/area/timeseries-with-irregular-data/index.md …