title: How to draw a d3.js line chart using angularjs directives
body: <p>How to use angular directives to load the d3.js graph using scope json data instead of using graph.html file.I had referred this url<a href="http://cloudspace.com/blog/2014/03/25/creating-d3.js-charts-using-angularjs-directives/#.VrXLw-auiSA" rel="nofollow">url</a>.But unable to do it for line chart.</p>
  
  <p>Can anyone please help me out regarding this issue ...</p>
  
  <p>My graph.html:</p>
  
  <pre><code>function getDate(d) {
   var dt = new Date(d.date);
   dt.setHours(0);
   dt.setMinutes(0);
   dt.setSeconds(0);
   dt.setMilliseconds(0);
   return dt;
   }
  
  function showData(obj, d) {
   var coord = d3.mouse(obj);
   var infobox = d3.select(".infobox");
   // now we just position the infobox roughly where our mouse is
   infobox.style("left", (coord[0] + 100) + "px" );
   infobox.style("top", (coord[1] - 175) + "px");
   $(".infobox").html(d);
   $(".infobox").show();
   }
  
  function hideData() {
   $(".infobox").hide();
   }
  
  var drawChart = function(data) {
   // define dimensions of graph
   var m = [10, 20, 10, 50]; // margins
   var w = 250 - m[1] - m[3]; // width
   var h = 100 - m[0] - m[2]; // height
  
  data.sort(function(a, b) {
   var d1 = getDate(a);
   var d2 = getDate(b);
   if (d1 == d2) return 0;
   if (d1 &gt; d2) return 1;
   return -1;
   });
  
  
   var minDate = getDate(data[0]),
   maxDate = getDate(data[data.length-1]);
  
   var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]);
  
  
   var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingValue; } )]).range([h, 0]);
  
  
   var line = d3.svg.line()
  
   .x(function(d, i) {
  
   return x(getDate(d)); //x(i);
   })
   .y(function(d) {
  
   return y(d.trendingValue);
   });
  
   function xx(e) { return x(getDate(e)); };
   function yy(e) { return y(e.trendingValue); };
  
  
  
   var graph = d3.select("#chart").append("svg:svg")
   .attr("width", w + m[1] + m[3])
   .attr("height", h + m[0] + m[2])
   .append("svg:g")
   .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  
  
   var xAxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).tickSize(-h).tickSubdivide(true);
  
   var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickFormat(formalLabel);
  
   graph
   .selectAll("circle")
   .data(data)
   .enter().append("circle")
   .attr("fill", "steelblue")
   .attr("r", 5)
   .attr("cx", xx)
   .attr("cy", yy)
   .on("mouseover", function(d) { showData(this, d.trendingValue);})
   .on("mouseout", function(){ hideData();});
  
   graph.append("svg:path").attr("d", line(data));
  
  
  
   $("#chart").append("&lt;div class='infobox' style='display:none;'&gt;Test&lt;/div&gt;");
   }
  </code></pre>
  
  <p>My directive:(which I had tried but unable to draw a graph)</p>
  
  <pre><code>angular.module( 'chart').directive( 'crD3Bars', [
    function () {
      return {
        restrict: 'E',
        scope: {
          data: '='
        },
        link: function (scope, element) {
          function getDate(d) {
   var dt = new Date(d.date);
   dt.setHours(0);
   dt.setMinutes(0);
   dt.setSeconds(0);
   dt.setMilliseconds(0);
   return dt;
   }
  
  function showData(obj, d) {
   var coord = d3.mouse(obj);
   var infobox = d3.select(".infobox");
   // now we just position the infobox roughly where our mouse is
   infobox.style("left", (coord[0] + 100) + "px" );
   infobox.style("top", (coord[1] - 175) + "px");
   $(".infobox").html(d);
   $(".infobox").show();
   }
  
  function hideData() {
   $(".infobox").hide();
   }
  
  var drawChart = function(data) {
   // define dimensions of graph
   var m = [10, 20, 10, 50]; // margins
   var w = 250 - m[1] - m[3]; // width
   var h = 100 - m[0] - m[2]; // height
  
  data.sort(function(a, b) {
   var d1 = getDate(a);
   var d2 = getDate(b);
   if (d1 == d2) return 0;
   if (d1 &gt; d2) return 1;
   return -1;
   });
  
  
   var minDate = getDate(data[0]),
   maxDate = getDate(data[data.length-1]);
  
   var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]);
  
  
   var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingValue; } )]).range([h, 0]);
  
  
   var line = d3.svg.line()
  
   .x(function(d, i) {
  
   return x(getDate(d)); //x(i);
   })
   .y(function(d) {
  
   return y(d.trendingValue);
   });
  
   function xx(e) { return x(getDate(e)); };
   function yy(e) { return y(e.trendingValue); };
  
  
  
   var graph = d3.select("#chart").append("svg:svg")
   .attr("width", w + m[1] + m[3])
   .attr("height", h + m[0] + m[2])
   .append("svg:g")
   .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  
  
   var xAxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).tickSize(-h).tickSubdivide(true);
  
   var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickFormat(formalLabel);
  
   graph
   .selectAll("circle")
   .data(data)
   .enter().append("circle")
   .attr("fill", "steelblue")
   .attr("r", 5)
   .attr("cx", xx)
   .attr("cy", yy)
   .on("mouseover", function(d) { showData(this, d.trendingValue);})
   .on("mouseout", function(){ hideData();});
  
   graph.append("svg:path").attr("d", line(data));
  
  
  
   $("#graphDiv3").append("&lt;div class='infobox' style='display:none;'&gt;Test&lt;/div&gt;");
   }
  drawchart(data);
          }
      };
    }
  ]);
  </code></pre>