This how does it work article is a follow on from the original jQuery in XPages #1 – Highcharts and goes into depth as to how the functionality was created and how you can modify it yourself.

Be fore-warned this is quite dry and not for the faint of heart, but hopefully will provide a good insight and understanding.

How does this work?

This Highchart demonstration is made up of the following design elements

• XPage
  • xFruit (the container XPage)
• Custom Controls (where all the hard work is done)
  • commonContainer (overall look an feel using the oneuiv2 example layout @ OpenNTF)
  • formFruit (basic form and viewPanel)
  • drawHighchart (charting capability)
• Theme
  • Highchart (extends oneuiv2)
• View
  • Fruit (data source for the viewPanel)
• Form
  • Fruit (data container)
• JavaScript Library
  • jsformFruit

To avoid making this article long(er than it already is) I am going to focus just on the drawHighchart custom control and the Highchart…