FusionCharts - Using macro variables in annotations for dynamic positioning

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ayan Bhadury

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- 

Roll over an anchor in the chart to see dynamic macros in action.

Macros allow you to use variables for positioning annotations on the charts. FusionCharts Suits XT allow 2 kinds of macros:
- Static macros: These macros help you locate position of static chart elements like canvas, chart borders etc. Examples are $canvasstartx, $canvasendx
- Dynamic macros: These macros help you locate position based on data points.  The format of dynamic macros is $dataset.0.set.2.x (in the syntax $dataset.dataset_index.set.set_index.x, with base as 0) or $dataset.0.set.2.y  (in the syntax $dataset.dataset_index.set.set_index.y, with base as 0) 
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        id: "mychart",
        type: 'msspline',
        renderAt: 'chart-container',
        width: '550',
        height: '400',
        dataFormat: 'json',
        dataSource: {
           "chart": {
                        "caption": "Results by Scenario",
                        "subCaption": "",
                        "xAxisName": "Percentile",
                        "yAxisName": "PEC",
                        "paletteColors": "#008ee4,#6baa01,#e44a00",
                        "bgAlpha": "0",
                        "borderAlpha": "20",
                        "canvasBorderAlpha": "0",
                        "LegendShadow": "0",
                        "legendBorderAlpha": "0",
                        "showXAxisLine": "1",
                        "showValues": "0",
                        "showBorder": "0",
                        "showAlternateHgridColor": "0",
                        //"base": "10",
                        "axisLineAlpha": "10",
                        "divLineAlpha": "10",
                        //"yAxisMinValue": "0.0001",
                        "yAxisValueDecimals": "5",
                        "toolTipColor": "#ffffff",
                        "toolTipBorderThickness": "0",
                        "toolTipBgColor": "#000000",
                        "toolTipBgAlpha": "80",
                        "toolTipBorderRadius": "2",
                        "toolTipPadding": "5",
                        "minimizeTendency": "0"
                    },
                    "categories": [
                        {
                            "category": [
                                {
                                    "label": "0",
                                    "showverticalline": "1"
                                },
                                 {
                                    "label": "10",
                                    "showlabel":"0",
    ...