I am completely new to working with d3 and JSON. I have a piece of data from JSON that I am attempting to extract, and I'm wondering if I am headed in the right direction.
My goal is to display a rectangle graph for each server within different status groups, positioning them nicely next to each other.
Despite reading numerous tutorials and searching for similar issues faced by others, I haven't had much luck so far...
The JSON data I am trying to extract:
[
{
"status": "ok",
"servers":
[
{
"id": "VR01",
"servername": "Server_1",
"cpu": 45,
"mem": 25,
"diskIO": 0,
"bandwith": 200
}
]
},
{
"status": "attention",
"servers":
[
{
"id": "VR10",
"servername": "Server_10",
"cpu": 55,
"mem": 35,
"diskIO": 1,
"bandwith": 2000
}
]
},
{
"status": "warning",
"servers":
[
{
"id": "VR02",
"servername": "Server_02",
"cpu": 98,
"mem": 85,
"diskIO": 1,
"bandwith": 2000
}
]
},
{
"status": "dead",
"servers":
[
{
"id": "VR20",
"servername": "Server_20",
"cpu": 0,
"mem": 0,
"diskIO": 0,
"bandwith": 0
}
]
}
The D3 code snippet:
<script>
var width = 1000;
var height = 800;
d3.json("mydata.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var status = function sortData(d){
for (i = 0; i < d.length; i++) {
if(d.status ==="ok") {
canvas.selectAll("rect")
.data(d.servers)
.enter()
.append("rect")
.attr("x", 25)
.attr("y", function(d, i){return 25 * i;})
.attr("fill", "purple");
}
}
});
</script>
Any suggestions or guidance would be greatly appreciated!