Xomino

Domino with the new improved X

jQuery in XPages #1 – Highcharts

Posted by mark roden on March 14, 2012

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 :)

Highcharts

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.

The Demo

Here is the demonstration site

and here is the demo dataabase

Link download the demo database

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.

The Example

Initial XPages form

Initial XPages form

Submitting the form gives us our new value

XPage with new Apples value added

XPage with new Apples value added

The XPage is laid out very simply and our View control is called viewPanel1

View Panel on the XPage

View Panel on the XPage

We add the drawHighchart Custom Control to the XPage

Adding the drawHighchart custom control to the page

Adding the drawHighchart custom control to the page

And let’s refresh our webpage – et voila – a chart

A simple Highchart added to our XPage

A simple Highchart added to our XPage

Changing the chart type is as simple as selecting a new theme and/or a new chart type

Changing the Highchart style

Changing the Highchart style

For more information on how this works check out the next article

jQuery in XPages #1 – Highcharts – how does it work?

About these ads

6 Responses to “jQuery in XPages #1 – Highcharts”

  1. Hi Mark,
    Cool example, how to use JQuery inside XPages.
    When I download the sample app, I am not able to open the database. Because of an encryption error.

  2. [...] 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 [...]

  3. Gabriel Coutinho Brêtas Netto said

    Hi, I’m trying to dynamically create a data table inside a dialog with a checkbox and a and editbox. I have tried jquery but i cant update the java objects I had it associated with it, the get methods are accessed but not the set methods. I also tried using a dojo dialog but then the problem is that any button wont work in it after i place the datatable. It just wont close, it seems that the event isn’t firing.
    Any pointers on the subject would be greatly appreciated.

    • MarkyRoden said

      Gabriel – if you are not using the XPages controls then the back end is not bound to the front end – you can load the data in the jQuery objects when the page is loaded but they are not “bound” in the same way because you are rolling your own js functionality. If you are rolling your own dojo that might be the same reason but I couldn’t say for sure.

      One way you can simulate the set functionality using “roll you own” is to create a button on the page hidden with style display:none and then use your jQuery to click that button – if you write the button to execute a set then it that will send data back to the back end that way

      Hope I understood the problem and I that helps :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: