title: How retrieve Data on mouse hover on Line chart - D3.js
body: <p><a href="https://i.stack.imgur.com/Fk1Fn.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fk1Fn.gif" alt="enter image description here"></a>
  Task - I</p>
  
  <p>I have a line chart ,where values on the chart that are retrieved on mouse hover are not correct as i am using a wrong logic .Help me in showing value on dots on chart by mouse hover .</p>
  
  <p>Task -II</p>
  
  <p>It would be kind if someone guide me to optimize the code and extending columns can automatically create more lines on chart  </p>
  
  <p>Appreciate your support </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt; /* set the CSS */
  
  body { font: 12px Arial;}
  
  path { 
     /* stroke: steelblue;*/
      stroke-width: 2;
      fill: none;
  }
  
  .axis path,
  .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
  }
  
  .tooltip {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 12px;
    padding: 8px;
    margin-top: -20px;
    font: 10px sans-serif;
    background: #ddd;
    pointer-events: none;
  }
  /* basic positioning */
  .legend { list-style: none; }
  .legend li { float: left; margin-right: 10px; }
  .legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px;}
  /* your colors */
  .legend .Referral { background-color: #FF7F0E; }
  .legend .Payment { background-color: #1f77b4; }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;!-- load the d3.js library --&gt;    
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  // Set the dimensions of the canvas / graph
  var margin = {top: 30, right: 20, bottom: 30, left: 100},
      width = 600 - margin.left - margin.right,
      height = 270 - margin.top - margin.bottom;
  
  // Parse the date / time
  var parseDate = d3.time.format("%m/%e/%Y").parse; //
  
  // Set the ranges
  var x = d3.time.scale().range([0, width]);
  var y = d3.scale.linear().range([height, 10]);
  
  // Define the axes
  var xAxis = d3.svg.axis().scale(x)
      .orient("bottom")   
       .ticks(d3.time.months)
      .tickSize(16, 0)
      .tickFormat(d3.time.format("%b%y"));
  
  
  var yAxis = d3.svg.axis().scale(y)
      .orient("left").ticks(5);
  
  // Define the line
  var valueline = d3.svg.line()
      .x(function(d) { return x(d.date); })   
      .y(function(d) { return y(d.referral); });
  
  var valueline2 = d3.svg.line()
      .x(function(d) { return x(d.date); })   
      .y(function(d) { return y(d.payment); });
  
  // Adds the svg canvas
  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 + ")");
  
  
  // Get the data
  d3.csv("misadhocdata.csv", function(error, data) {
  
  
  
    data.forEach(function(d) {
          d.date = parseDate(d.date);
          d.referral = +d.referral;
          d.payment = +d.payment;
  
      });
  
  
      // Scale the range of the data
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return Math.max(d.referral, d.payment); })]);
  
  
      // Add the valueline path.
      svg.append("path")          //Referral Orange
          .attr("class", "line")
          .attr('stroke', '#FF7F0E')
          .on("mouseover", mouseover)
          .on("mousemove", mousemove)
          .on("mouseout", mouseout)       
          .attr("d", valueline(data))  ;
  
          // Add the scatterplot Referral
      svg.selectAll("dot")
          .data(data)
        .enter().append("circle")
          .attr("r", 3.5)
          .attr("cx", function(d) { return x(d.date); })
          .attr("cy", function(d) { return y(d.referral); })
          .style("fill",'#FF7F0E')
          .on("mouseover", mouseover)
          .on("mousemove", mousemove)
          .on("mouseout", mouseout); 
  
  
  
    // Add the valueline2 path.
      svg.append("path")        //Payment Blue
          .attr("class", "line")
          .attr('stroke', '#1f77b4')
          .attr('stroke-width', 2)
          .attr("d", valueline2(data))
          .on("mouseover", mouseover)
          .on("mousemove", mousemove)
          .on("mouseout", mouseout);
  
  
          // Add the scatterplot Payments
      svg.selectAll("dot")
          .data(data)
        .enter().append("circle")
          .attr("r", 3.5)
          .attr("cx", function(d) { return x(d.date); })
          .attr("cy", function(d) { return y(d.payment); })
          .style("fill",'#1f77b4')
          .on("mouseover", mouseover)
          .on("mousemove", mousemove)
          .on("mouseout", mouseout)
          ; 
  
  
      // 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);
  
  
  
  
  
  var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("display", "none");
  
  function mouseover() {
    div.style("display", "inline");
  }
  
  var max=d3.max(data, function(d) { return Math.max(d.referral, d.payment); });
  
  function mousemove() {
          //Math.round(((max/210)*(210-d3.event.pageY)))
        div.text(function(d,i){return Math.round(((max/200)*(247-d3.event.pageY)))})
        .style("left", (d3.event.pageX - 34) + "px")
        .style("top", (d3.event.pageY - 12) + "px");
  }
  
  
  function mouseout() {
    div.style("display", "none");
  }
  
  
  });
  
  &lt;/script&gt;
  
  &lt;div id="Cpt"&gt;
  &lt;ul class="legend"&gt;
      &lt;li&gt;&lt;span class="Referral"&gt;&lt;/span&gt; Referral&lt;/li&gt;
      &lt;li&gt;&lt;span class="Payment"&gt;&lt;/span&gt; Payment&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>date    ,   referral    ,   payment ,   New ,   New1    ,   New3    ,   New4</p>
  
  <p>12/1/2015   ,   20  ,   43  ,   62  ,   70  ,   77  ,   82</p>
  
  <p>1/1/2016    ,   21  ,   48  ,   61  ,   69  ,   75  ,   81</p>
  
  <p>2/1/2016    ,   26  ,   51  ,   64  ,   71  ,   78  ,   83</p>
  
  <p>3/1/2016    ,   28  ,   52  ,   64  ,   73  ,   77  ,   83</p>
  
  <p>4/1/2016    ,   22  ,   49  ,   63  ,   69  ,   73  ,   0</p>
  
  <p>5/1/2016    ,   26  ,   53  ,   65  ,   70  ,   0   ,   0</p>
  
  <p>6/1/2016    ,   16  ,   41  ,   56  ,   0   ,   0   ,   0</p>
  
  <p>7/1/2016    ,   27  ,   48  ,   0   ,   0   ,   0   ,   0</p>
  
  <p>8/1/2016    ,   18  ,   0   ,   0   ,   0   ,   0   ,   0</p>