FusionCharts - Gallery Example - DragNode Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ashok Kumaresan

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<!-- Dragnode chart showing process flow for construction of a store.  -->
<div style="width:100%;height:900px;background:#eee">
    <h1>Top</h1>
</div>
<div id="chart-container">FusionCharts will render here</div>
<div style="width:100%;height:900px;background:#eee">
       <h1>Bottom</h1>
</div>

CSS

h1{text-align:center;font-size:20px;}

JavaScript

window.location.hash = '#chart-container';
FusionCharts.ready(function () {
    var constructionPlan = new FusionCharts({
        type: 'dragnode',
        renderAt: 'chart-container',
        width: '650',
        height: '450',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Project Plan for Construction of a Store (time duration in weeks)",                                
                "arrowatstart": "0",
                "arrowatend": "1",
                "viewMode": "1",
                "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",
  ...