-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathshared-crosshairs.html
108 lines (95 loc) · 3.27 KB
/
shared-crosshairs.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
<head>
<title>Yagr</title>
<script src="../../dist/yagr.iife.js"></script>
<link rel="stylesheet" href="../../dist/index.css" />
<style>
.container {
margin-bottom: 26px;
height: 400px;
width: 50%;
}
.grid {
height: 400px;
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
</style>
</head>
<body>
<h1>Shared crosshairs</h1>
<div class="grid">
<div id="chart1" class="container left"></div>
<div id="chart2" class="container right"></div>
</div>
<div class="grid">
<div id="chart3" class="container left"></div>
<div id="chart4" class="container right"></div>
</div>
<h2>Sync on dynamic update</h2>
<div class="grid">
<div id="chart5" class="container left"></div>
<div id="chart6" class="container right"></div>
</div>
<button id="update">Update</button>
<script>
const showTooltip = (y) => y.state.isMouseOver;
const y1 = new Yagr(chart1, {
title: {text: 'Example 1'},
timeline: [1, 2, 3],
series: [{data: [1, 2, 3], color: 'red'}],
cursor: {sync: 'a'},
tooltip: {show: showTooltip},
});
const y2 = new Yagr(chart2, {
title: {text: 'Example 2'},
timeline: [1, 2, 3],
series: [{data: [3, 2, 1], color: 'green'}],
cursor: {sync: 'a'},
tooltip: {show: showTooltip},
});
y1.subscribe();
y2.subscribe();
const y3 = new Yagr(chart3, {
title: {text: 'Example 3'},
timeline: [1, 2, 3],
series: [{data: [1, 2, 3], color: 'red'}],
cursor: {sync: 'b'},
});
const y4 = new Yagr(chart4, {
title: {text: 'Example 4'},
timeline: [1, 2, 3],
series: [{data: [3, 2, 1], color: 'green'}],
cursor: {sync: 'b'},
});
y4.subscribe();
y3.subscribe();
const y5 = new Yagr(chart5, {
title: {text: 'Example 5'},
timeline: [1, 2, 3],
series: [{data: [1, 2, 3], color: 'red'}],
cursor: {sync: 'c'},
});
const y6 = new Yagr(chart6, {
title: {text: 'Example 6'},
timeline: [1, 2, 3],
series: [{data: [3, 2, 1], color: 'green'}],
cursor: {sync: 'c'},
});
y5.subscribe();
y6.subscribe();
update.onclick = () => {
y5.setConfig({
timeline: [1, 2, 3, 4],
series: [{data: [1, 2, 3, 4], color: 'red'}],
});
y6.setConfig({
timeline: [1, 2, 3, 4],
series: [{data: [1, 2, 3, 4], color: 'green'}],
});
};
</script>
</body>
</html>