Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 82 lines (69 sloc) 2.606 kb
7d31d5f @markmahoney initial commit
markmahoney authored
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6 <title>Boundary Data-source Example</title>
7
8 <!-- required third-party libraries -->
9 <script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
10 <script src="lib/org/cometd.js" type="text/javascript"></script>
11 <script src="lib/org/cometd/TimeSyncExtension.js" type="text/javascript"></script>
12 <script src="lib/jquery.cometd.js" type="text/javascript"></script>
13 <script src="lib/jquery.cometd-timesync.js" type="text/javascript"></script>
14
15 <!-- Boundary JavaScript API files -->
16 <!-- Don't forget to update the auth.js file with your account info! -->
17 <script src="bndry/auth.js" type="text/javascript"></script>
18 <script src="bndry/data-source.js" type="text/javascript"></script>
19
20 <!-- example code -->
21 <script src="example-volume-graph.js" type="text/javascript"></script>
22
23 <style type="text/css">
24 #container {
25 margin: 20px auto;
26 position: relative;
27 width: 960px;
28 }
29 #container h1 {
30 margin: 0 0 1em;
31 }
32 #container p {
33 margin: 0 0 1.5em;
34 }
35
36 #controls {
37 margin: 1.5em 0;
38 }
39
40 #graph {
41 background: #eee;
42 margin: 0 0 1.5em;
43 }
44 #graph canvas {
45 display: block;
46 }
47 </style>
48 </head>
49
50 <body>
51 <div id="container">
52 <div id="example">
53 <h1>Volume of Ingress Octets per Second</h1>
54
55 <div id="controls">
56 <button id="subscribe" disabled>Subscribe to data-source</button>
57 <button id="unsubscribe" disabled>Unsubscribe from data-source</button>
58 </div>
59
60 <canvas id="graph" width="960" height="40">You must use a browser that <a href="http://www.google.com/chrome">supports the canvas tag</a> to view this example.</canvas>
61 </div>
62
63 <div id="explaination">
64 <p>
65 This is a demonstration of how a Boundary dataSource interacts with a custom visualization. In this example,
66 we are displaying the amount of ingress octets measured per second for the last 600 seconds across all meters
67 in an organization.
68 </p>
69
70 <p>
71 Activating the "unsubscribe" button will cause the graph object to stop recieving updates from it's dataSource.
72 Note that when a dataSource has no subscribers, it will become idle. Activating the "subscribe" button will cause
3e40ca7 @markmahoney removed updateInterval, upgraded to v2 auth, removed update method, clea...
markmahoney authored
73 the graph object to begin recieving updates again.
7d31d5f @markmahoney initial commit
markmahoney authored
74 </p>
75
76 <p>
3e40ca7 @markmahoney removed updateInterval, upgraded to v2 auth, removed update method, clea...
markmahoney authored
77 See the <a href="example-volume-graph.js">example-volume-graph.js</a> file for implementation details.
7d31d5f @markmahoney initial commit
markmahoney authored
78 </p>
79 </div>
80 </div>
81 </body>
82 </html>
Something went wrong with that request. Please try again.