-
Notifications
You must be signed in to change notification settings - Fork 4
/
sparklines.html
47 lines (44 loc) · 1.6 KB
/
sparklines.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>eurostat-map.js</title>
</head>
<body>
<svg id="map"></svg>
<script src="https://unpkg.com/eurostat-map"></script>
<script>
eurostatmap
.map("spark")
.nutsLvl(1)
.statSpark(
{ eurostatDatasetCode: "demo_r_pjanaggr3", filters: { sex: "T", unit: "NR" }, unitText: "people" },
["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"], //dates
["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"], //labels
)
.sparkType("line")
.sparkLineWidth(25)
.sparkLineStrokeWidth(1)
.sparkLineColor("#c44a4a")
.sparkLineHeight(5)
.sparkLineOpacity(0.9)
.sparkLineCircleRadius(0.1)
.nutsbnStroke({ 0: "black", 1: "grey", 2: "grey", 3: "grey", oth: "black", co: "black" })
.nutsbnStrokeWidth({ 0: 0.2, 1: 0.1, 2: 0, 3: 0, oth: 0.1, co: 0.2 })
.tooltip({
xOffset: 30,
yOffset: 150,
fontSize:"12px",
maxWidth: Math.min(400, window.innerWidth)
})
.sparkTooltipChart({
width: 150,
height: 50,
margin: { left: 60, right: 40, top: 20, bottom: 40 },
circleRadius: 1.5
})
.build()
</script>
</body>
</html>