Pre-Requisites to understand this article is experience with LiveCycle ES4- specially the new Mobile Forms and FormManager capabilities. If you would like to learn more on these topics please visit ES4 Mobile Forms for detailed documentation
In this article we will use JQPlot charting capabilities to draw a pie chart.To Learn more about JQPlot- click here The charts data will be coming from the table which is designed using the LiveCycle Designer. We will also be exploring the FormBridge API’s to access the Table’s data to feed into the JQPlot chart.
First design a simple dynamic table in LiveCycle Designer. In the Designer create a place holder for the pie chart.
Upload the xdp and the sample data into LiveCycle Form Manager.Download the sample xdp and test data
Next we need to create a custom profile. A profile is nothing but a html page which will be used to contain the html rendition of the xdp form.More on Custom Profile The custom profile of ours will make use of JQPlot library and the FormBridge API to access the data from the Form to build the PieChart. The following code in our custom profile is import
Var label = formBridge.getFieldValue(“xfa.form.form1.#subform.TableAndChart.Table1.Row1[“+i+”].Cell1″);
Var value = formBridge.getFieldValue(“xfa.form.form1.#subform.TableAndChart.Table1.Row1[“+i+”].Cell3″);
The above code gets the cell values from the First and Third columns. Once we have the values we then create an Array which is then passed to JQPlot to render the PieChart.
The rest of the code in the html page is JQPlot specific to draw the PieChart.
To create a custom profile on your system please follow the following instructions
Login to /lc/crx/de on your machines
Naviagte to /content/xfaforms/profiles
Right click on profile node and create a Node called charts of type nt:unstructured
Set the following properties on the newly created node
Next Download the profile
Then using package manager import the profile
Navigate to /apps/jpmc/chart folder
Take a look at the html.jsp code. This is the code which reads the tables data and generates the Pie Chart
To get the complete setup on your system follow the following steps
Upload the xdp you have downloaded into FormManager
Upload the sample data using Form Manager
Associate the Charts profile with the form
Preview the form with sample data
If all has gone well you should see something like this