Drag-node Chart > Submitting data as form elements

Since the drag node chart is a visual data widget, you might need to submit the modified data to your scripts for further processing. The drag-node chart offers you two methods to do the same:

  1. You can submit the updated data from chart to your server side script (as form elements) in XML format.
  2. Or, you can submit this 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, we'll see how to submit the data to a server side script.

 
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 it, you use the following attribute:

<chart ... showFormBtn='1' ...>

This adds a submit button to your chart as below:

Now you need to define the form properties i.e., where and how this button would submit the data to. The following attributes let you define the form properties:
Attribute Name Description
formAction URL of your server side script to which you want to submit data. You can either use relative path or absolute path. The name of form variable which is to be requested in this page is strXML.
formMethod Method of form submission - POST or GET. We recommend POST method if you're submitting data as XML.
formTarget Target of the form - _blank or _self.
formBtnTitle Lets you configure the text for the submit button. By default, it's "Submit"
btnTextColor Color of the button text
formBtnWidth Lets you configure the width of the submit button.
formBtnBorderColor Border color for the submit button
formBtnBgColor Background color for the submit button.

formAction is the most important attribute which contains the full path to your server side script. e.g., <chart ... showFormBtn='1' formAction='../MyDataProcessor.asp' ..>. If you do not specify this attribute, the form wouldn't submit at all.

You can also define the form method (GET or POST) and target (_self or _blank) using the attributes above.

Now, in your server side script (MyDataProcess.asp or MyDataProcess.php or MyDataProcess.aspx or ...), you can request the updated XML data from chart as strXML variable. For example, given below is the ASP code that simply requests the XML from chart and outputs it:

<%
   Response.ContentType="text/xml"
   Response.Write(Request("strXML"))
%>

In your scripts, you can request the XML data, parse it and then process it further as per your requirements.

Next, we'll see how to request the chart data in client side JavaScript functions.