Annotations are truncated at edge of chart area

[James_UK]

I'm using a column chart (column2d) and adding a callout annotation on a dataset. How do I stop the callout from going outside the bounds of the chart area?

Example: given the fiddle http://jsfiddle.net/fusioncharts/bLxr4/ 

1) add   "textAlign":"right",   to groups[{}]

2) change the callout so it displays on column 0 by changing all "$dataset.0.set.1" to "$dataset.0.set.0"

When you run this you should see the callout text is chopped off at the left since it is outside the chart area

Sure I can change the starting x co-ordinate of the CalloutBase, but I would need potentially to alter this for every dIndex in the dataset, so that's not very practical (when I have a large number of data points each with a different and variable message)

Is there some parameter I'm missing? Or do you have any other suggestions for a way to keep the text within the chart area?

Many thanks

James

{FC XT 3.12}

[Akash Biswas]

Hi James,

 

FusionCharts feature of Annotations are itself static in nature, though it can be positioned dynamically using macros.

 

But, if the annotation is going out of the chart canvas, it need to be manually configured accordingly. For the instance in this fiddle, the group of annotations that is chopped off. The Text annotation can be split into two lines using {br} tag so that its length gets reduced, the Rectangle annotation need to be adjusted accordingly, to keep it within the chart canvas.

 

Please check the modified fiddle : http://jsfiddle.net/Akash008/9s8tvgqc/

Hope this helps.

 

Thanks,

Akash.

 

[James_UK]

Hi Akash,

Static or fixed annotations, and with a known number of columns/data points are fine, since I can determine the x,y coordinates on the server (although that's rather clumsy).The problem comes with dynamic (i.e. variable content - determined in browser at runtime) annotation text, and/or a variable number of columns (e.g. in your fiddle, suppose instead of 4 columns, you had 12 or 24, or some number selected by the user in the browser?). The web page would be unable to determine the correct, new, placement of the annotation and would need to make a call to the server for a refresh.

 

Quote

 the Rectangle annotation need to be adjusted accordingly, to keep it within the chart canvas

This is they key. How can I determine, at runtime, whether it will go outside the chart area?

 

Something like        

"x" : "Math.min( $chartStartX+5, $dataset.0.set.0.x-15 )"               

 

Alternatively if there was some way to get back a dataObj (similar to dataplotRollOver but for an Annotation item or group) which contained 'x' and 'chartX', so I could then recalculate the annotation start point outside of FC.

Thanks,

James

[Akash Biswas]

Hi James,

 

1. For the quoted text in your previous reply, the rectangle annotation need to be configured manually to set its x, y, toX and toY attributes for positioning. It cannot be dynamically resized at run-time as stated earlier.

 

2. However, your suggested technique, Math.min(200, 300) JS function can be used to set absolute values in "x" or "y" attributes only.

But it cannot accept the Macros as its parameters. "Math.min( $chartStartX+5, $dataset.0.set.0.x-15 )" wont work. Since macros are strings, and are calculated internally if provided to x, y attributes.

 

3. Your query for getting the "x", "y" values using events is possible. Please check the sample fiddle : https://jsfiddle.net/Akash008/no1mvauc/ (Check the console)

Note : This will fetch the value assigned to the "x" or "y" attribute. If Macros are used, it returns the Macro string itself, not the absolute value.

 

As FusionCharts annotations are static in nature, dynamic resizing based on number of dataplots available is not possible.

 

Thanks,

Akash.

 

[James_UK]

Hi Akash,

>  If Macros are used, it returns the Macro string itself, not the absolute value.

I think that should be considered as being a bug.

Retrieving the annotations object after "drawcomplete" (as in your fiddle) should be capable of returning the computed x,y values in the object. It shouldn't, at that stage, be merely returning the unexpanded input string.

Thanks,

James