Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (69 sloc) 2.54 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Boundary Data-source Example</title>
<!-- required third-party libraries -->
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="lib/org/cometd.js" type="text/javascript"></script>
<script src="lib/org/cometd/TimeSyncExtension.js" type="text/javascript"></script>
<script src="lib/jquery.cometd.js" type="text/javascript"></script>
<script src="lib/jquery.cometd-timesync.js" type="text/javascript"></script>
<!-- Boundary JavaScript API files -->
<!-- Don't forget to update the auth.js file with your account info! -->
<script src="bndry/auth.js" type="text/javascript"></script>
<script src="bndry/data-source.js" type="text/javascript"></script>
<!-- example code -->
<script src="example-volume-graph.js" type="text/javascript"></script>
<style type="text/css">
#container {
margin: 20px auto;
position: relative;
width: 960px;
}
#container h1 {
margin: 0 0 1em;
}
#container p {
margin: 0 0 1.5em;
}
#controls {
margin: 1.5em 0;
}
#graph {
background: #eee;
margin: 0 0 1.5em;
}
#graph canvas {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="example">
<h1>Volume of Ingress Octets per Second</h1>
<div id="controls">
<button id="subscribe" disabled>Subscribe to data-source</button>
<button id="unsubscribe" disabled>Unsubscribe from data-source</button>
</div>
<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>
</div>
<div id="explaination">
<p>
This is a demonstration of how a Boundary dataSource interacts with a custom visualization. In this example,
we are displaying the amount of ingress octets measured per second for the last 600 seconds across all meters
in an organization.
</p>
<p>
Activating the "unsubscribe" button will cause the graph object to stop recieving updates from it's dataSource.
Note that when a dataSource has no subscribers, it will become idle. Activating the "subscribe" button will cause
the graph object to begin recieving updates again.
</p>
<p>
See the <a href="example-volume-graph.js">example-volume-graph.js</a> file for implementation details.
</p>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.