Rendering a Chart in Mobile Forms

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
sling:resourceSuperType: xfaforms/profile
sling:resourceType: jpmc/chart
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
Sample Chart

This entry was posted in Adobe LiveCycle ES4, Adobe LiveCycle ES3 and tagged , , , , , , . Bookmark the permalink.

2 Responses to Rendering a Chart in Mobile Forms

  1. pavan says:

    Can you provide the sample xdp and test data to run the application. I am not able to download with the provided link.

  2. Girish Bedekar says:

    I have updated the link .You should now be able to download the sampe xdp and the sample data.