FusionWidgets XT (v3.2) introduces macros for annotations. Macros are pre-defined variables which assume values at run-time. These values are generated dynamically based on the positions of various visual elements of a chart or gauge. The macros can be set as the value for the x and y positions of an annotation or annotation group. For example, the macro $chartCenterX always provides the horizontal-center position of a chart or gauge. If you want to place a circle annotation at the center of a chart or gauge, set x="$chartCenterX" and y="$chartCenterY" while defining the circle annotation. The circle will be placed at the center of the chart or gauge.

To enable macros in annotations, set the manageResize attribute to 1 in the <chart> element of the XML or in the chart Object of the JSON.

Let's take an example showing circles around an angular gauge. Suppose we have the following angular gauge that shows a clock:

We provide a circular blue background to the clock as well as a dark blue pivotal circle at the center of the clock.

The XML/JSON for the same is:

See it live!

In the above data, you have done the following:

• Created two annotation groups
• Set the x position of the first group using the $chartCenterX macro
• Set the y position of the first group using the $chartCenterY macro
• Added a blue circle with x and y positions set to 0
• Set the x and y positions of the second group to 0
• Added a dark blue small circle with the x position set using $chartCenterX macro and the y position set using $chartCenterY macro

In an angular gauge the $chartCenterX macro and the $chartCenterY macro point to the center of the gauge (which is the common center position of the dials). Thus, the first annotation group is positioned at this central point. The center of the blue circle, with x and y set to 0, is also set to this center. The second annotation group is positioned at the top-left corner of the gauge. However, the center of the small circle is fixed to the center of the gauge using the relevant macros.

Note: The values provided by the macros change dynamically when a chart or gauge resizes. Thus, irrespective of the size of the above rendered gauge, the annotations are always placed at the center of the gauge. Consider the image shown below:

See it live!

Here, the gauge is rendered using a different size. The XML is not changed. However, the positions of the annotations have changed automatically.

You can set macros in the following attributes of annotation groups and annotations:

• You can set macros to the x attribute of both annotation group and annotation
• You can set macros to the y attribute of both annotation group and annotation
• You can set macros to the toX and toY attributes

You cannot set macros to the xShift, yShift, xScale, yScale, radius, yRadius and innerRadius attributes.

List of macro names

FusionWidgets XT supports the following macros for annotations and annotation groups:

You can also add numeric (integer) values to the macros or subtract numeric (integer) values from macros to offset the annotations. For example, you may want to draw a rectangle 10 pixels away from the chart borders like the image shown below:

You can define the rectangle as shown in the snippet below:

<annotation type="rectangle"  
    x="$chartStartX+10" y="$chartStartY+10" 
    toX="$chartEndX-10" toY="$chartEndY-10" 
showBorder="1"  borderThickness="5" borderColor="FFFFFF" fillAlpha="0" fillColor="07476D" />

"items": [
          {
            "type": "rectangle",
            "x": "$chartStartX+10", 
            "y": "$chartStartY+10",
            "tox": "$chartEndX-10",
            "toy": "$chartEndY-10",
            "showborder": "1",
            "borderthickness": "5",
            "bordercolor": "FFFFFF",
            "fillalpha": "0",
            "fillcolor": "07476D" 
          },
...
        ]

See it live!

In the above defined rectangle annotation we have applied macro expressions as described below:

• We have set $chartStartX+10 to the x position. This positions the rectangle 10 pixels away from the left.
• We have set $chartStartY+10 to the y position. This positions the rectangle 10 pixels away from the top.
• We have set $chartEndX-10 to the toX position. This positions the end of the rectangle 10 pixels away from the right.
• We have set $chartEndY-10 to the toY position. This positions the end of the rectangle 10 pixels away from the bottom.

You can only use + or - operators to create a macro expression. You are required to use at least one macro name to create a macro expression. Common mathematical expressions like "30+10-5", which do not contain a macro, are not allowed.

Important Note: While using the dynamic resizing feature, the values provided by macros are not scaled. Rather, these values are re-set with the new values provided by the resized chart. However, the numeric values present in the macro expressions are scaled. For example, the value 10 in the expression $chartStartY+10 is scaled while using dynamic resizing. If do not want this numeric part to be scaled while using the dynamic resizing feature, you need to prefix the number with $. For example, the value 10 in the expression $chartStartY+$10 is NOT scaled while using dynamic resizing.