I am looking to place a text element (or two) below the legend, aligned with it's right side, but I can't get consistent coordinates.
Warning: I am a relative noob at SVG.
I have a series of datasets that I want to show charts for. As I move from one to the other, I'm adding new serieses and deleting old ones. After each update, I attempt to place a string, which include the dataset's average, below the legend. The problem I am running into is that every other time that I query the x & y attributes, the string ends up outside of the chart. The other half of the time, I get a perfect result.
The code I'm using to place this string is:
var tbl=table[3];
$('.usData').remove();
//get legend x & y
startX = chart.legend.group.translateX;
endX = startX + chart.legend.legendWidth;
startY = chart.legend.group.translateY;
endY = startY + chart.legend.legendHeight;
$(tbl.usAvg).each(function(i){
chart.renderer.text("National Avg: " + formatData(this,tbl.format), endX, endY+(i*15)+15).attr({'text-anchor':'end',zIndex:12, class:'usData'}).add();
What I think is happening is that the legend starts outside of the plot and is translated into it's position. Therefore, I am unable to reliably "grab" accurate coordinates until it is done rendering.
So, my question: Is there a way to determine (event) when the legend is finished moving, or do I simply have to include a timeout and wait?