FusionCharts - DragNode Chart in JavaScript - Submit data to the server

Created using FusionCharts Suite XT - www.fusioncharts.com

by Siva Subramaniam

HTML

<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>
<!-- Railway Map using DragNode Chart. Submitting data to the server and using the dataSubmitted event when the data is submitted to the server succesfully -->
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div id="indicatorDiv">Event name: <b> dataSubmitted </b> 
        <br />
        <p>For interative charts like Select Scatter, DragNode, Dragable Column2D and etc., data points' value can be changed / added and can be sent to an URL by ajax. This event is raised when the ajax request is successfully completed.</p>
        <p>The following details can be obtained from the argObj parameter of the event once the chart data is submitted succesfully to server (URL as mentioned in the formaction attribute). (Please click the save button at bottom right to see the table below)</p>
    </div>
    <div id="message"></div>
    <div id="table-container">
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

#header {
    display: none;
}
#indicatorDiv, #message {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

FusionCharts.ready(function () {
    var railwayChart = new FusionCharts({
        type: 'dragnode',
        renderAt: 'chart-container',
        width: '500',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Railway Map",
                    "xaxisminvalue": "0",
                    "xaxismaxvalue": "100",
                    "yaxisminvalue": "0",
                    "yaxismaxvalue": "100",
                    "is3d": "0",
                    "showformbtn": "1",
                // A sample PHP script which mimics data save at server side
                "formaction": "http://www.fusioncharts.com/dev/resources/php/chart-guide-drag-node-chart-getting-data-using-javascript-update.php",
                    "formtarget": "_blank",
                    "formmethod": "POST",
                    "formbtntitle": "Save",
                    "viewmode": "0",
                    "showplotborder": "1",
                    "plotborderthickness": "4",
                    "theme": "fint",
                    "showcanvasborder": "1",
                    "canvasborderalpha": "20"
            },
                "dataset": [{
                "data": [{
                    "id": "01",
                        "label": "Santa Monica",
                        "color": "#ffffff",
                        "x": "16",
                        "y": "54",
                        "radius": "30",
                        "shape": "circle"
                }, {
                    "id": "02",
                        "label": "Los Angeles",
                        "color": "#ffffff",
                        "x": "27",
                        "y": "54",
                        "radius": "30",
                        "shape": "circle"
                }, {
                    "id": "03",
                        "label": "Ontario",
                        "color": "#ffffff",
                        "x": "48",
                     ...