Skip to content

Instantly share code, notes, and snippets.

@itsprdp

itsprdp/dual-y-axes-line-chart-d3.html

Created February 18, 2015 07:36
Show Gist options
  • Save itsprdp/f492504b493aef8c5b5c to your computer and use it in GitHub Desktop.
Save itsprdp/f492504b493aef8c5b5c to your computer and use it in GitHub Desktop.
Download ZIP
Dual y axes line chart using d3.js
Raw
dual-y-axes-line-chart-d3.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
path {
fill: none;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<title>D3 - Multiple y Axis line graph</title>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 30, right: 40, bottom: 30, left: 50},
width = 900 - margin.left - margin.right,
height = 370 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(function(d) {
var date = (new Date(d)).toString().split(' ');
return date[1] + ' ' + date[2];
});
var yAxisLeft = d3.svg.axis().scale(y0)
.orient("left").ticks(5);
var yAxisRight = d3.svg.axis().scale(y1)
.orient("right").ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.bookings); })
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.bookings_rev); });
var svg = d3.select("body")
.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 + ")");
var data = {"aggregate":{"bookings":9,"bookings_rev":2495.0,"net_stays":9,"net_stays_rev":2495.0},"daily":{"2015-01-28":{"bookings":2,"bookings_rev":448.0,"net_stays":0,"net_stays_rev":0},"2015-01-30":{"bookings":1,"bookings_rev":169.0,"net_stays":0,"net_stays_rev":0},"2015-02-02":{"bookings":2,"bookings_rev":726.0,"net_stays":0,"net_stays_rev":0},"2015-02-04":{"bookings":4,"bookings_rev":1152.0,"net_stays":0,"net_stays_rev":0},"2015-02-05":{"bookings":0,"bookings_rev":0,"net_stays":1,"net_stays_rev":538.0},"2015-02-09":{"bookings":0,"bookings_rev":0,"net_stays":1,"net_stays_rev":189.0},"2015-02-13":{"bookings":0,"bookings_rev":0,"net_stays":1,"net_stays_rev":199.0},"2015-02-24":{"bookings":0,"bookings_rev":0,"net_stays":1,"net_stays_rev":188.0},"2015-03-01":{"bookings":0,"bookings_rev":0,"net_stays":2,"net_stays_rev":448.0},"2015-03-10":{"bookings":0,"bookings_rev":0,"net_stays":1,"net_stays_rev":169.0},"2015-03-16":{"bookings":0,"bookings_rev":0,"net_stays":2,"net_stays_rev":764.0}}};
var dataset = [];
for(i = 0; i < Object.keys(data.daily).length; i++ ) {
var date = Object.keys(data.daily)[i];
dataset[i] = {
date: (new Date(date)),
bookings: parseFloat(data.daily[date].bookings),
bookings_rev: parseFloat(data.daily[date].bookings_rev),
net_stays: parseFloat(data.daily[date].net_stays),
net_stays_rev: parseFloat(data.daily[date].net_stays_rev)
};
}
// Scale the range of the data
x.domain(d3.extent(dataset, function(d) { return d.date; }));
y0.domain([0, d3.max(dataset, function(d) {
return Math.max(d.bookings);
})]);
y1.domain([0, d3.max(dataset, function(d) {
return Math.max(d.bookings_rev);
})]);
svg.append("path") // Add the valueline path.
.style("stroke", "steelblue")
.attr("d", valueline(dataset));
svg.append("path") // Add the valueline2 path.
.style("stroke", "red")
.attr("d", valueline2(dataset));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style("fill", "steelblue")
.call(yAxisLeft)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Bookings");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "red")
.call(yAxisRight)
.append("text")
.attr("transform", "rotate(0)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Bookings Rev");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment