My webpage structure is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="title">Statistics</div>
<div id="chart"></div>
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/d3.min.js"></script>
<script src="js/src/main.js"></script>
<script>
$(function() {
HU.init();
});
</script>
</body>
</html>
This is the JavaScript code written for displaying data:
var HU = (function() {
var data = [
{"time": "13:24:20", "level_1": "5553", "level_2": "4682", "level_3": "1005"},
{"time": "14:24:20", "level_1": "6553", "level_2": "5682", "level_3": "2005"},
{"time": "15:24:20", "level_1": "7553", "level_2": "6682", "level_3": "3005"},
{"time": "16:24:20", "level_1": "8553", "level_2": "7682", "level_3": "3131"},
{"time": "17:24:20", "level_1": "9953", "level_2": "5500", "level_3": "5005"},
{"time": "18:24:20", "level_1": "8565", "level_2": "7682", "level_3": "6005"},
{"time": "19:24:20", "level_1": "7753", "level_2": "4546", "level_3": "4405"}
];
init = function() {
var margin = {
top: 10,
right: 10,
bottom: 30,
left: 50
},
width = 950 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%H:%M:%S").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format(("%H:%M:%S")));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var bars = svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return x(parseDate(d.time)); })
.attr("y", function(d) { return y(d.level_1); })
.attr("width", 15)
.attr("height", function(d) { return height - y(d.level_1); })
.style("fill", "steelblue");
};
return {
init: init
};
})();
I am trying to display time from JSON on the X-Axis, and show all three levels overlapping each other on the Y-Axis. The CSS styling for this page is as follows:
body {
font: 300 78px Helvetica Neue;
}
#title {
font-size: 50px;
margin: 20px;
text-align: center;
color: steelblue;
}
#chart {
margin: 20px auto;
position: relative;
width: 900px;
height: auto;
}
svg {
font: 10px sans-serif;
}
.x.axis path {
display: none;
}
.y.axis line {
stroke: #fff;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.y.axis .zero line {
stroke: #000;
stroke-opacity: 1;
}
rect {
fill-opacity: 0.9;
fill: #777;
}
rect:first-child {
fill: steelblue;
}
Any suggestions on how I can achieve this? Thank you in advance!