I am delighted to present the first in my series of articles highlighting some extremely cool jQuery plugins and how to integrate them within XPages. During the course of the articles I will always demonstrate at least at some level, basic integration with XPages. In many cases I will not be able to cover all the examples of everything possible with each plugin, but I hope to give at least a good teaser to the possibilities and show the myriad of possibilities.
I have to also say a HUGE thank you to David Leedy (www.notesin9.com) who is hosting my demonstration for this and the rest of this series when I get to them.
So without further ad0 – welcome to jQuery in XPages #1 🙂
For full disclosure, Highcharts is not free for commercial use.
“Do you want to use Highcharts for a personal or non-profit project? Then you can use Highchcarts for free under the Creative Commons Attribution-NonCommercial 3.0 License.”.
But part of the reason I chose it as the #1 is because it really rocks well with an XPage environment. It has direct business applicability, unlike many other jQuery plugins which are pretty, but hardly “corporate”. The format and structure of the chart instantiation also jibes well with XPages and I was able to create a custom control which can be applied to any formatted viewPanel or dataTable.
and here is the demo dataabase
In the example below you can see a simple form with a viewPanel. Adding a new value to the form refreshes the page and displays the value entered. The exact same functionality would be seen if I had a basic data table looking at the same view of data.
Submitting the form gives us our new value
The XPage is laid out very simply and our View control is called viewPanel1
We add the drawHighchart Custom Control to the XPage
And let’s refresh our webpage – et voila – a chart
Changing the chart type is as simple as selecting a new theme and/or a new chart type
For more information on how this works check out the next article