Updating Chart Data on Server

The drag-node chart allows you to update data in real-time and submit the modified data to your scripts for further processing.

The drag-node chart offers you two methods to update chart data on the server:

Submit the updated data from the chart to your server-side script (as form elements) in XML format.
Submit the updated data as XML/array to client-side JavaScript functions. These functions can now handle the data in the way they want to.

In this section, you will be shown how you can update chart data using server-side scripts.

Setting the Form

To enable submission of data to server-side script, you first need to make sure that the Submit button is not hidden on your form.

To show the Submit button, you can use the following code snippet:

{
    "chart": {
        "showFormBtn": "1"
    }
}

This adds a submit button to your chart as shown below:

image alt text

Given below is a brief description of the attributes used to show/hide and define the form properties for the Submit button:

Attribute Name	Description
`showFormBtn`	It is used to specify whether the Submit button will be rendered on the chart. Setting this attribute to `1` will show the button, setting it to `0` will hide it. If you are using JavaScript methods to get data from the chart, you can hide this button.
`formAction`	It is used to specify the URL of the server-side script to which you want to submit the updated data. You can specify the relative or the absolute path. The `strXML` form variable is to be requested in this page.
`formMethod`	It is used to specify the method - `GET` or `POST` - for submission of form data. It is recommended that you use the `POST` method if you will be submitting the data as XML.
`formTarget`	It is used to specify the target page where the response received after submitting form data will be rendered. This attribute takes the following two values: `_blank` or `_self`.
`formBtnTitle`	It is used to specify the text label for the Submit button. By default, the label is Submit.
`btnTextColor`	It is used to specify the hex code of the color for the Submit button.
`formBtnWidth`	It is used to specify the width, in pixels, of the Submit button.
`formBtnBorderColor`	It is used to specify the hex code of the border color for the Submit button.
`formBtnBngColor`	It is used to specify the hex code of the background color for the Submit button.

The code snippet below shows how the server-side PHP script is used to submit data:

<?php
//File to write
$filename = 'xml/dragNodeData.xml';
//Requested data
$content = $_REQUEST['strXML'];
// Let's make sure the file exists and is writable first.
if (is_writable($filename)) {
    // In our example we're opening $filename in write mode.
    // The file pointer is at the bottom of the file hence
    // that's where $content will go when we fwrite() it.
    if (!$handle = fopen($filename, 'w')) {
        echo "Cannot open file ($filename)";
        exit;
    }
    // Write $content to our opened file.
    if (fwrite($handle, $content) === FALSE) {
        echo "Cannot write to file ($filename)";
        exit;
    }
    echo "Success, wrote ($content) to file ($filename)";
    //Close the file
    fclose($handle);
} else {
    echo "The file $filename is not writable";
}
?>

There! You have now seen how you can update real-time data for a drag-node chart using server-side scripts.