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
111
112
113
114
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Axes tick labels options</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.canvaswrapper.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.colorhelpers.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.saturated.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.browser.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.drawSeries.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.uiConstants.js"></script>
<script language="javascript" type="text/javascript" src="/usr/share/javascript/jquery-flot/jquery.flot.axislabels.js"></script>
<style>
.x1Label {
fill: #224499;
font-size: 20px;
font-family: Tahoma, Geneva, sans-serif;
}
.x2Label {
fill: #224499;
font-style: italic;
font-size: 24px;
}
.x3Label {
fill: #225511;
font-size: 14px;
}
.y1Label {
fill: #772211;
font-size: 18px;
}
.y2Label {
fill: #772211;
font-style: bold;
font-size: 15px;
}
</style>
<script type="text/javascript">
var data, options, plot;
$(function() {
var index = 10000;
function generate(start, end, fn) {
var res = [];
for (var i = 0; i <= 400; ++i) {
var x = start + i / 400 * (end - start);
res.push([x, fn(x)]);
}
return res;
}
function update() {
index += 0.01;
data = [
{ data: generate(index, index + 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:1, lines: { show: true}}
];
plot.setData(data);
plot.setupGrid(true);
plot.draw();
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
data = [
{ data: generate(index, 2, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:1, lines: { show: true}}
];
options = {
xaxes: [
{ position: 'bottom', axisLabel: 'X Axis', showTickLabels: 'none' },
{ position: 'bottom', axisLabel: 'Second X Axis', show: true, showTickLabels: 'none', showMinorTicks: true, gridLines: false, min: 0, max: 2},
{ position: 'top', axisLabel: 'Third X Axis', show: true, showTickLabels: 'none', showTicks: true, gridLines: false }
],
yaxes: [
{ position: 'left', axisLabel: 'Y Axis', showTickLabels: 'none' },
{ position: 'right', axisLabel: 'Second Y Axis', show: true, showTickLabels: 'none', showTicks: true, gridLines: false }
]
};
plot = $.plot("#placeholder", data, options);
});
function toggleAxisLabels() {
options.axisLabels = options.axisLabels || {show: true};
options.axisLabels.show = !options.axisLabels.show;
plot = $.plot("#placeholder", data, options);
}
</script>
</head>
<body>
<div id="header">
<h2>Flot Examples: Axes labels</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<button onclick="toggleAxisLabels()">Toggle axis labels visibility</button>
</div>
</body>
</html>
|
