-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
85 lines (73 loc) · 2.38 KB
/
example.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
<!doctype html>
<!-- Based on http://www.flotcharts.org/flot/examples/series-toggle/index.html but without the pretty-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot-adaptive example</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.adaptive.js"></script>
<script type="text/javascript">
var choiceContainer;
$(function(){
function oscillating(x){
return Math.cos(x)*Math.sin(x)*Math.sin(x) + Math.cos(Math.PI * Math.sin(x))+2;
}
function fastGrowing(x){
return Math.exp(x*Math.cos(x))*Math.pow(Math.sin(x),2);
}
var choices = {
// Options for adaptive
f: [oscillating, fastGrowing],
range: [[0, 15], [0, 35]],
maxAngle: [0.01, 0.05, 0.1, 0.5],
maxRecursion: [0, 1, 2, 5, 10],
minStep: [0.0001, 0.001, 0.01, 0.1, 1],
// Options for yaxis
logScale: [false, true],
// Options for points
showPoints: [true, false]};
var opts={f: oscillating, range: [0, 15]};
var logScale = false;
var showPoints = true;
choiceContainer = $("#choices");
var txt='';
for(key in choices){
txt += '<br/><label>'+key+'</label><select>';
for( opt in choices[key]){
txt+="<option name='"+key+"' value='"+opt+"'>"+choices[key][opt]+"</option>";
}
txt+='</select>';
}
choiceContainer.append(txt);
choiceContainer.find('select').change(updatePlot);
function updatePlot(){
choiceContainer.find('select').children(':selected').each(function(i,x){
var optName;
optName=x.getAttribute('name');
optPos = x.getAttribute('value');
opts[optName] = choices[optName][optPos];
});
var yopts = {};
if(opts.logScale){
yopts.transform = function(x){return Math.log(x+1);};
yopts.inverseTransform = function(x){return Math.exp(x)-1;};
}
$.plot("#placeholder",
[{
data: opts.f,
adaptive: opts
}],
{
lines: {show: true},
points: {show: opts.showPoints},
yaxis: yopts
});
}
updatePlot();
});
</script>
</head>
<div id="placeholder" style="width: 600px; height: 300px; float: left"></div>
<p id="choices" style="float:right; width: 200px;"></p>
</html>