I have been attempting to create a graph to display previous data to give the user an informed decision when inputting data. Each data point needs to have a tag (the tooltip that appears displaying the value) as well as a click listener to show the value.
What I have observed with larger data sets >10 values, the hover and click circles have huge radii and do not allow the mouse to view each individual data point.
Listeners:
.hover(function () {
this.tags = r.set();
this.tags.push(r.tag(this.x, this.y, this.value, 0, 10).insertBefore(this).attr([{
fill: "#FFF"
}, {
fill: this.symbol.attr("fill")
}]
));
}, function () {
this.tags && this.tags.remove();
}).attr("stroke", "#000")
.click(function(){
alert("you clicked " + this.value);});
chrt.tags = r.set();
Here is a demo of what I have run into. http://jsfiddle.net/vpGyL/1428/
The problem is that the radii of each symbol is calculated only based on the next plotted point in the graph. If the data is not linear or has multiple series, the circles can become quite large and cover up other symbols. This can be adjusted with
this.attr({r:6})
inside the hover function.