itsprdp/d3-line-graph-with-dual-y-axis

## d3-line-graph-with-dual-y-axis
<!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 + ")");

// Data will be inputed through PageConfig.
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>
	<!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 + ")");

	// Data will be inputed through PageConfig.
	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>