vertical bar showing values in javascript -


i have issue , need help. have realtime graph vertical bar moves cursor , want show value of graph (d.time , d.value) when cursor points to. http://jsfiddle.net/qbdgb/54/ have 2 series of data (data1s , data2s) generated randomly , put time in data generated in "time" variable can see:

now = new date(date.now() - duration);  var data1 = initialise(); var data2 = initialise();    //make stacked data  var data1s = data1; var data2s = []; for(var = 0; < data1s.length; i++){ data2s.push({ value:  data1s[i].value + data2[i].value, time: data2[i].time }    )};   function initialise() {   var arr = [];  (var = 0; < n; i++) {      var obj = {  time: date.now(),  value: math.floor(math.random() * 100) };      arr.push(obj);  }   return arr; 

}

when hover around graph want tooltip show time , value not recognize , show "undefined" since not know how pass datasets (data1s , data2s) "mouseover function can recognize data show! how tooltip functions made , call "path1" , "path2".

function mouseover() {      div.transition()     .duration(500)     .style("opacity", 1); }  function mousemove(d) {     div   .text( d.time+ ", " + d.value)   .style("left", (d3.event.pagex ) + "px")   .style("top", (d3.event.pagey ) + "px");  }    function mouseout() {    div.transition()   .duration(500)   .style("opacity", 1e-6);  }  var path1 = svg.append("g")     .attr("clip-path", "url(#clip)")     .append("path")     .data([data1s])     .attr("class", "line1")     .on("mouseover", mouseover)     .on("mousemove", mousemove)     .on("mouseout", mouseout);     var path2 =svg.append("g")     .attr("clip-path", "url(#clip)")     .append("path")     .data([data2s])     .attr("class", "line2")     .on("mouseover", mouseover)     .on("mousemove", mousemove)     .on("mouseout", mouseout); 

do have idea of do? think need add

svg.selectall("path1") .attr("opacity", 1)   or svg.selectall("datas1") .attr("opacity", 1) 

somewhere! not know how..

thank you,

update mouseover function as:

function mousemove(d) {   div  .text( d[0].time+ ", " + d[0].value)  .style("left", (d3.event.pagex ) + "px")  .style("top", (d3.event.pagey ) + "px"); } 

include index object 'd'.

hope helps.


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

html - Unable to style the color of bullets in a list -

c# - must be a non-abstract type with a public parameterless constructor in redis -