This tutorial will show you how to make a Dynamic3 Ever-changing Bar Graph. For simplicity's sake, the bar values will be based on randomly generated data.
Here's what it will look like:
Let’s start with our HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="./local/path/to/dynamic3.js"></script>
<script src="./local/path/to/myGraph.js"></script>
<style>
#bar-graph {
display:block;
height: 202px;
width: 402px;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Helvetica, Arial;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
font-size: 10px;
}
</style>
</head>
<body>
<div id="bar-graph"></div>
</body>
</html>
The rest of our work will be done in a new JavaScript file we'll call myGraph.js.
In our onload event, we use the createGraph function with the argument 'BarGraph' to create an instance of the ever-changing bar graph. Note that for this tutorial, all of the code we write will be in this onload function. But this is not required to use Dynamic3.
window.onload = function() {
var bar = dynamic3.createGraph('BarGraph');
}
Setting attributes of our bar graph is made simple via Dynamic3 calls. For example, we can set the height and width by calling the specific library functions, setHeight and setWidth. The library function can be chained together for cleaner code.
bar.setWidth('400px')
.setHeight('200px')
.setDomain([0, 100])
.setPadding(10)
.setTransitionTime(400)
.setBackgroundColor('#496dff')
.setBorderColor('#2b2c2b')
.setBorderWidth(1)
.setOrientation('horizontal')
.setText(getDataText); //we'll define getDataText later
When you're done defining attributes, call insertIntoHTMLElement on your graph object, passing in the HTML element that will contain your graph. This will make your graph appear on your webpage.
bar.insertIntoHTMLElement(document.getElementById("bar-graph"));
We will simulate real-time data using the loopWithRandomDynamicData function below.
function loopWithRandomDynamicData() {
bardata = [];
for (var i = 0; i < 5; i += 1) {
bardata[i] = Math.floor(Math.random() * 100) | 0;
}
bar.update(bardata);
var waitTime = Math.random() * 3000; // wait between 0 and 3 seconds for next data point.
setTimeout(loopWithRandomDynamicData, waitTime)
//In order to simulate the data coming in, we call this function over and over again after a random amount of seconds each time.
}
loopWithRandomDynamicData(); //initial call to function
}
The important thing to note in our function is the call to bar.update. Update takes in an array of data for the graph to display. The order of the data on the bar graph is displayed in the same order as the data in the array. Update should be called each time you want to update the data that is being displayed in the graph.
Lastly, we define the function getDataText which feeds our graph data for the labels. In getDataText or any label-defining function, data is the value from the array we passed into update. Since we only want to display that value on the label, we just return data in our function.
function getDataText(data) {
return data;
}
And that's all there is to it!