source: appstream-generator/contrib/setup/js_tmp/Flot/examples/realtime/index.html @ 4841

Last change on this file since 4841 was 4841, checked in by Juanma, 2 years ago

Initial release

File size: 2.7 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <title>Flot Examples: Real-time updates</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
8        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
9        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
10        <script type="text/javascript">
11
12        $(function() {
13
14                // We use an inline data source in the example, usually data would
15                // be fetched from a server
16
17                var data = [],
18                        totalPoints = 300;
19
20                function getRandomData() {
21
22                        if (data.length > 0)
23                                data = data.slice(1);
24
25                        // Do a random walk
26
27                        while (data.length < totalPoints) {
28
29                                var prev = data.length > 0 ? data[data.length - 1] : 50,
30                                        y = prev + Math.random() * 10 - 5;
31
32                                if (y < 0) {
33                                        y = 0;
34                                } else if (y > 100) {
35                                        y = 100;
36                                }
37
38                                data.push(y);
39                        }
40
41                        // Zip the generated y values with the x values
42
43                        var res = [];
44                        for (var i = 0; i < data.length; ++i) {
45                                res.push([i, data[i]])
46                        }
47
48                        return res;
49                }
50
51                // Set up the control widget
52
53                var updateInterval = 30;
54                $("#updateInterval").val(updateInterval).change(function () {
55                        var v = $(this).val();
56                        if (v && !isNaN(+v)) {
57                                updateInterval = +v;
58                                if (updateInterval < 1) {
59                                        updateInterval = 1;
60                                } else if (updateInterval > 2000) {
61                                        updateInterval = 2000;
62                                }
63                                $(this).val("" + updateInterval);
64                        }
65                });
66
67                var plot = $.plot("#placeholder", [ getRandomData() ], {
68                        series: {
69                                shadowSize: 0   // Drawing is faster without shadows
70                        },
71                        yaxis: {
72                                min: 0,
73                                max: 100
74                        },
75                        xaxis: {
76                                show: false
77                        }
78                });
79
80                function update() {
81
82                        plot.setData([getRandomData()]);
83
84                        // Since the axes don't change, we don't need to call plot.setupGrid()
85
86                        plot.draw();
87                        setTimeout(update, updateInterval);
88                }
89
90                update();
91
92                // Add the Flot version string to the footer
93
94                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
95        });
96
97        </script>
98</head>
99<body>
100
101        <div id="header">
102                <h2>Real-time updates</h2>
103        </div>
104
105        <div id="content">
106
107                <div class="demo-container">
108                        <div id="placeholder" class="demo-placeholder"></div>
109                </div>
110
111                <p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
112
113                <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
114
115        </div>
116
117        <div id="footer">
118                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
119        </div>
120
121</body>
122</html>
Note: See TracBrowser for help on using the repository browser.