-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscatter2.html
110 lines (109 loc) · 3.94 KB
/
scatter2.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
109
110
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/pms.css" rel="stylesheet" type="text/css" />
<!-- script src="js/jquery-3.5.1.min.js"></script -->
<!-- script src="js/jquery.dataTables.min.js"></script -->
<script src="js/readers.js"></script>
<script src="js/sprintf.min.js"></script>
<script src="js/d3.v7.min.js"></script>
<script src="js/plotly-2.24.1.min.js"></script>
<script src="js/fast-stats.js"></script>
<style>
.resizable {
resize: both;
overflow: scroll;
border: 1px solid black;
width: 600px;
height: 300px;
}
</style>
<title>Multi-Scatter Chart (Regelkarte)</title>
</head>
<body>
<h2>Multi-Scatter Chart</h2>
<p>
Mehrere Datenreihen als Scatter-Plot. Das Datenformat ist
"Name\tx-Wert\ty-Wert\n", Im Moment sind noch keine
statistischen Berechnungen hinterlegt.
</p>
<table>
<tr>
<td>Titel</td><td><input type="text" id="title" value="" /></td>
</tr>
<tr>
<td>x-Achse Titel</td><td><input type="text" id="xtitle" value="" /></td>
</tr>
<tr>
<td>y-Achse Titel</td><td><input type="text" id="ytitle" value="" /></td>
</tr>
<tr>
<td>Daten</td>
<td>
<textarea id="tdata" rows="8" cols="60">
</textarea>
</td>
</tr>
<tr>
<td><button onclick="makeDiag()">Make</button></td>
<td><button onclick="makeImg('myDiv', 'jpg-export')">Copy</button></td>
</tr>
<tr>
<td>Width</td><td><input type="number" id="cWidth" value="600" onchange="cHWChange()" /></td>
</tr>
<tr>
<td>Height</td><td><input type="number" id="cHeight" value="300" onchange="cHWChange()"" /></td>
</tr>
</table>
<p>
<div id='myDiv' class="resizable" onresize="doResize(this)"></div>
<br>
</p>
<img id="jpg-export"></img>
</body>
<script>
cHWChange();
function cHWChange(){
let W = document.getElementById('cWidth').value;
let H = document.getElementById('cHeight').value;
document.getElementById('myDiv').setAttribute("style","Width:"+ W +'px;Height:'+ H+'px');
}
function makeDiag(){
//document.getElementById('tdata').value = text;
let divName = 'myDiv';
let sampleData = readKeyPairs(document.getElementById('tdata').value);
let title = document.getElementById( 'title').value;
let xtitle = document.getElementById('xtitle').value;
let ytitle = document.getElementById('ytitle').value;
let plData = [];
sampleData.forEach(function(item){
let ss = {
x : item.x,
y : item.y,
name : item.name,
type : 'scatter',
mode : 'markers',
};
plData.push(
ss
);
});
let layout = {
title: title,
xaxis: {
title: xtitle,
},
yaxis: {
title: ytitle,
},
};
Plotly.newPlot(divName, plData,layout, {editable: true, responsive: true},);
}
document.getElementById('tdata').value = 'hs\t5.51\t6.3\n'
+'nicht hs\t5.94\t6.6\n'
+'nicht hs\t6.02\t6.19\n'
+'nicht hs\t5.87\t6.12\n'
+'nicht hs\t5.95\t6.02\n';
</script>
</html>