FusionCharts - Positioning annotations w.r.t dataset and Axes

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Positioning annotations w.r.t Dataset and Axes. The chart uses different types of annotations for axes and dataset. Custom y-axis created using annotation.Data plots on rollover shows respective details using annotations.
-->

<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
    var visitChart = new FusionCharts({
        id: "mychart",
        type: 'dragnode',
        renderAt: 'chart-container',
        width: '600',
        height: '600',
        dataFormat: 'json',
        dataSource: {
  "chart":{
    "palette":"2",
    "xaxisminvalue":"0",
    "xaxismaxvalue":"100",
    "yaxisminvalue":"0",
    "yaxismaxvalue":"100",
    "is3d":"1",
      "baseFontSize":"15",
      "valueFontSize":"10",
    "showformbtn":"1",
    "viewmode":"0"
  },
  "dataset":[{
      "seriesname":"DS1",
      "data":[{
          "x":"12",
          "y":"79",
          "width":"70",
          "height":"56",
          "name":"Node 1 with a long label",
          "color":"FE3233",
          "id":"1"
        },
        {
          "x":"59",
          "y":"15",
          "width":"40",
          "height":"56",
          "name":"Node 2",
          "color":"FE9191",
          "id":"2",
          "link":"n-http://www.fusioncharts.com"
        },
        {
          "x":"88",
          "y":"75",
          "radius":"37",
          "shape":"circle",
          "name":"Node 3",
          "color":"62D0FE",
          "id":"3",
          "link":"n-http://www.fusioncharts.com"
        },
        {
          "x":"33",
          "y":"35",
          "radius":"37",
          "shape":"circle",
          "name":"Node 4",
          "color":"FE8181",
          "id":"4",
          "link":"n-http://www.fusioncharts.com"
        },
        {
          "x":"40",
          "y":"85",
          "width":"45",
          "height":"67",
          "name":"Node 5",
          "color":"FE7272",
          "bordercolor":"ff5904",
          "id":"5"
        },
        {
          "x":"69",
          "y":"85",
          "width":"45",
          "height":"67",
          "name":"Node 6",
          "color":"72D4FE",
          "id":"6",
          "link":"n-http://www.fusioncharts.com"
        },
        {
          "x":"87",
          "y":"45",
          "radius":"47",
     ...