D3.JS API Example
This example shows how you can use D3s powerful visualisation tools with live ARDI data.
The Base Page
First, prepare a basic web page that….
- Contains an area for a bar chart,
- Includes the required libraries from ARDI, JQuery and D3
<html> <head> <title>Test D3 Page</title> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="http://ademo.optrix.com.au/plugins/optrix/ardiclient.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.0/d3.min.js"></script> <script> //Initialisation Goes Here </script> </head> <body> <div id="content" style="width: 600px; height: 50px; margin-left: auto; margin-right: auto;"> </div> </body> </html>
The Script
Next, we can start on our script.
var content; var incomingdata = [0]; $(function() { content = d3.select("#content") .selectAll("div") .data(incomingdata) .enter().append("div") .style("width", function(d) { return (d * 10) + "px"; }) .text(function(d) { return d; }); });