On button click show other graph D3.js

Here is the code for two line graphs http://ift.tt/1KSJzt1. On click of Data 1 button it should show graph with "close" values and on click of Data 2 button it should show graph with "close2" values. How do I achieve this. Where to add if else statement in the code?

var app = angular.module('myApp', []);
app.controller('myController', ['$scope',
  function($scope) {
    //setting the data in the scope
    $scope.data = [{
      "date": "2012-04-30T18:30:00.000Z",
      "close": 58.13,
      "close2": 95,
      "ews": 3,
    }, {
      "date": "2012-04-29T18:30:00.000Z",
      "close": 53.98,
      "close2": 120,
      "ews": 3
    }, {
      "date": "2012-04-26T18:30:00.000Z",
      "close": 67,
      "close2": 185,
      "ews": 3
    }, {
      "date": "2012-04-24T18:30:00.000Z",
      "close": 99,
      "close2": 220,
      "ews": 2
    }, {
      "date": "2012-04-23T18:30:00.000Z",
      "close": 80,
      "close2": 60,
      "ews": 3
    }, {
      "date": "2012-04-22T18:30:00.000Z",
      "close": 167,
      "close2": 90,
      "ews": 0
    }, {
      "date": "2012-04-19T18:30:00.000Z",
      "close": 234,
      "close2": 90,
      "ews": 3
    }, {
      "date": "2012-04-18T18:30:00.000Z",
      "close": 101,
      "close2": 60,
      "ews": 1
    }, {
      "date": "2012-04-17T18:30:00.000Z",
      "close": 92,
      "close2": 70,
      "ews": 2
    }, {
      "date": "2012-04-16T18:30:00.000Z",
      "close": 96,
      "close2": 78,
      "ews": 2
    }, {
      "date": "2012-04-15T18:30:00.000Z",
      "close": 58,
      "close2": 88,
      "ews": 3
    }, {
      "date": "2012-04-12T18:30:00.000Z",
      "close": 105,
      "close2": 80,
      "ews": 1
    }, {
      "date": "2012-04-11T18:30:00.000Z",
      "close": 238,
      "close2": 120,
      "ews": 3
    }, {
      "date": "2012-03-29T18:30:00.000Z",
      "close": 108,
      "close2": 68,
      "ews": 1
    }, {
      "date": "2012-03-28T18:30:00.000Z",
      "close": 96,
      "close2": 98,
      "ews": 2
    }, {
      "date": "2012-03-27T18:30:00.000Z",
      "close": 198,
      "close2": 60,
      "ews": 0
    }];

  }
]);
app.directive('linearChart', function() {
  return {
    restrict: 'EA',

    link: function(scope, elem, attrs) {
      var data = scope.data;
      // Set the dimensions of the canvas / graph
      var margin = {
          top: 30,
          right: 20,
          bottom: 80,
          left: 50
        },
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

      // Parse the date / time
      var parseDate = d3.time.format("%d-%b-%y").parse;

      // Set the ranges
      var x = d3.time.scale().range([0, width]);
      var y = d3.scale.linear().range([height, 0]);

      // Define the axes
      var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5).tickFormat(d3.time.format("%d %b"));

      var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);

      // Define the line
      var valueline = d3.svg.line()
        .x(function(d) {
          return x(new Date(d.date));
        })
        .y(function(d) {
          return y(d.close);
        });

      // Define the line2   
      var valueline2 = d3.svg.line()
        .x(function(d) {
          return x(new Date(d.date));
        })
        .y(function(d) {
          return y(d.close2);
        });

      // Adds the svg canvas
      var svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
      // Scale the range of the data
      x.domain(d3.extent(data, function(d) {
        return new Date(d.date);
      }));
      y.domain([0, d3.max(data, function(d) {
        return d.close;
      })]);

      // Add the valueline path.
      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline2(data));

      //text label for y axis
      svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Value");
      // text label for the x axis
      svg.append("text")
        .attr("x", width / 2)
        .attr("y", height + 70)
        .style("text-anchor", "middle")
        .attr("class", "xlabel")
        .text("Date");
      // Add the scatterplot
      svg.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3.5)
        .style("fill", function(d) {
          if (d.ews == 0) return "green";
          if (d.ews == 1) return "yellow";
          if (d.ews == 2) return "orange";
          if (d.ews == 3) return "red";
        })
        .attr("cx", function(d) {
          return x(new Date(d.date));
        })
        .attr("cy", function(d) {
          return y(d.close);
        }).on("mouseover", function() {
          return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
        })
        .on("mousemove", function(d) {
          console.log()
          d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
          d3.select("#mytooltip").select("#ttdate").text(function() {
            return d.date; //setting the date values to tooltip
          });
          d3.select("#mytooltip").select("#ttclose").text(function() {
            return d.close; //setting the date values to tooltip
          });
          return;
        })
        .on("mouseout", function() {
          return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
        });

      // Add the scatterplot2
      svg.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3.5)
        .style("fill", function(d) {
          if (d.ews == 0) return "green";
          if (d.ews == 1) return "yellow";
          if (d.ews == 2) return "orange";
          if (d.ews == 3) return "red";
        })
        .attr("cx", function(d) {
          return x(new Date(d.date));
        })
        .attr("cy", function(d) {
          return y(d.close2);
        }).on("mouseover", function() {
          return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
        })
        .on("mousemove", function(d) {
          console.log()
          d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
          d3.select("#mytooltip").select("#ttdate").text(function() {
            return d.date; //setting the date values to tooltip
          });
          d3.select("#mytooltip").select("#ttclose").text(function() {
            return d.close2; //setting the date values to tooltip
          });
          return;
        })
        .on("mouseout", function() {
          return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
        });



      // Add the X Axis
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      // Add the Y Axis
      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    }
  };
});

h1 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
}
body {
  font: 12px Arial;
}
path {
  stroke: #35cc99;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: gray;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.mytool {
  background: red;
  color: white;
}
.xlabel {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
}

<div ng-app='myApp' ng-controller="myController">
  <h1>My Chart</h1>
  <button>Data 1</button>
  <button>Data 2</button>
  <svg linear-chart></svg>
</div>
<div class="mytool" id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
  <div id="ttclose"></div>
  <div id="ttdate"></div>
</div>