FusionCharts - Gallery Example - DragNode Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Dragnode chart showing process flow for construction of a store.  -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var constructionPlan = new FusionCharts({
    type: 'dragnode',
    renderAt: 'chart-container',
    width: '650',
    height: '450',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        //"theme": "fusion",
        "caption": "Project Plan for Construction of a Store (time duration in weeks)",
        "arrowatstart": "0",
        "arrowatend": "1",
        "viewMode": "0",
        "showCanvasBorder": "0",
        "showXAxisLine": "0",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "paletteColors": "#0075c2",
        "baseFontColor": "#ffffff",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "14",
        "captionFontColor": "#333333",
        "btnTextColor": "#333333",
        "showPlotBorder": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "connectorToolText": "$label Weeks"
      },
      "dataset": [{
        "id": "1",
        "seriesname": "DS1",
        "data": [{
            "id": "2",
            "x": "15",
            "y": "56",
            "name": "A",
            "radius": "20",
            "shape": "CIRCLE",
            "tooltext": "A. Excavate"
          },
          {
            "id": "3",
            "x": "28",
            "y": "56",
            "name": "B",
            "radius": "30",
            "shape": "CIRCLE",
            "tooltext": "B. Foundation"
          },
          {
            "id": "4",
            "x": "42",
            "y": "56",
            "name": "C",
            "radius": "20",
            "shape": "CIRCLE",
            "tooltext": "C. Rough Wall"
          },
          {
            "id": "5",
            "x": "45",
            "y": "28",
            "name": "D",
            "radius": "20",
            "shape": "CIRCLE",
            "tooltext": "D. Roof"
         ...