Zeitring: eine Woche Chats, Stunde für Stunde
Ein Heatmap-Ring (Montag innen, Sonntag außen, eine Zelle je Stunde) liegt unter den Stundensummen: Die Zellen teilen die Winkel der Spalten, sodass das Überfahren einer Stunde diese für alle Tage hervorhebt und der Tooltip die sieben Tage aufführt. In der Mitte zeigt eine Polargebietsgrafik die Kanalverteilung (Radius = Volumen, unabhängig vom Ring).
Zeitringe und Ziele
Diagramm ohne Website-Rahmen öffnen ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
const options = {
"chart": {
"type": "radialColumn",
"height": 580,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Chats",
"data": [
49,
43,
50,
56,
54,
49,
44,
56,
99,
142,
203,
241,
306,
297,
301,
285,
271,
230,
182,
130,
79,
64,
51,
49
]
}
],
"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": [
"#818cf8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"center": {
"show": false
},
"link": {
"mode": "angle",
"unit": "hours"
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "34%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
]
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"labels": [
"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"
],
"ringGap": 1,
"color": "#a78bfa"
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.84,
"hole": 0,
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "24%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
],
"gap": 2
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"labels": [
"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"
],
"ringGap": 0.5,
"color": "#a78bfa"
}
]
}
}
}
}
]
}
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": 580,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Chats",
"data": [
49,
43,
50,
56,
54,
49,
44,
56,
99,
142,
203,
241,
306,
297,
301,
285,
271,
230,
182,
130,
79,
64,
51,
49
]
}
],
"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": [
"#818cf8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"center": {
"show": false
},
"link": {
"mode": "angle",
"unit": "hours"
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "34%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
]
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"labels": [
"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"
],
"ringGap": 1,
"color": "#a78bfa"
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.84,
"hole": 0,
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "24%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
],
"gap": 2
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"labels": [
"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"
],
"ringGap": 0.5,
"color": "#a78bfa"
}
]
}
}
}
}
]
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Warten auf das Diagramm.
Open Data & agent view to read this chart through chart.describe().
Aus der laufenden Bibliothek über das optionale agent/describe -Modul gelesen. Text, Tabelle und JSON zeigen denselben Zustand. Ausschließlich Demonstrationsdaten.
$ wcc chart export radial-column-heat-week.json --out radial-column-heat-week.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Speichern Sie zuerst eine JSON-Spezifikation und prüfen Sie vor dem Rendern die geladene Runtime und die unterstützten Module. Befehlsreferenz
Loading /gallery/radial-column/heat-week/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?