flot.github.com/example.pcolor.html at ae336b91b0970eb424a29a3d1de2dedf7ba5322c · flot/flot.github.com · GitHub

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
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.pcolor.js"></script>
<div id="myplot" style="width:320px;height:240px"></div>

<script language="javascript">

var colormap_brw = [[0,"#0000ff"],[0.5,"#ffffff"],[1,"#ff0000"]];
var colormap_jet = [[0,"#00007f"], [0.125,"#0000ff"], [0.25,"#007fff"], [0.375,"#00ffff"],
[0.5,"#7fff7f"], [0.625,"#ffff00"], [0.75,"#ff7f00"], [0.875,"#ff0000"], [1.0,"#7f0000"] ];

var options = {
    series:{pcolor:{active:true,show:true,grid:true,colormap:colormap_jet,scalebar:{location:"top right",orientation:"vertical",width:15,height:100,fontsize:"12px",fontfamily:"times",labels:3,labelformat:"1f",textalign:"right"}}}
};

var plt = $.plot($("#myplot"),[],options);

var twist = 0;

setInterval(function () {
	var pixels = [];
	seed = (Math.random()-0.5)/500;
	twist += (Math.random()-0.5);
	var bendx = 0, bendy = 0;
	xaxis = [];
	yaxis = [];
	var x_min=1e32, y_min=1e32, x_max=-1e32, y_max=-1e32;
	for (var i=0;i<240;i++) {
		pixels[i] = [];
		xaxis[i] = [];
		yaxis[i] = [];
		bendy+=(Math.random()-0.5);
		for (var j=0;j<320;j++) {
			bendx+=(Math.random()-0.5)/20;
			xaxis[i][j] = j+bendy;
			yaxis[i][j] = i+bendx;
			pixels[i][j]=((1+Math.sin(twist+((i-120)*(j-160)+twist)*seed))/2)*twist*100;
		}
		x_min = Math.min.apply(x_min,xaxis[i]);
		x_max = Math.max.apply(x_max,xaxis[i]);
		y_min = Math.min.apply(y_min,yaxis[i]);
		y_max = Math.max.apply(y_max,yaxis[i]);
	}
	plt.setData([[xaxis,yaxis,pixels]]);

	plt.getAxes().yaxis.options.min = 0;
	plt.getAxes().yaxis.options.max = 239;
	plt.getAxes().xaxis.options.min = 0;
	plt.getAxes().xaxis.options.max = 319;

	plt.setupGrid();
	plt.draw();
}, 500);
</script>
</body>
</html>