0

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?

astangelo
  • 385
  • 1
  • 9

1 Answers1

0

I suggest simpler solution, with setting useHTML for legend. http://jsfiddle.net/aWFYr/1/

$('#btn').click(function(){

        $('.highcharts-legend').append('<div style="position:absolute;top:'+(chart.legend.legendHeight)+'px">aaa</div>');

    });
Sebastian Bochan
  • 36,889
  • 3
  • 45
  • 75
  • Yes, but then the added div is not present in the exported image/pdf. That is part of the end objective. – astangelo Feb 28 '13 at 11:20
  • Is not displayed in exported image, because it is dynamic content, but when you export chart then it is created again. You can try to add this instrucion in load event: http://api.highcharts.com/highcharts#chart.events.load – Sebastian Bochan Feb 28 '13 at 11:27