In this article I will demonstrate how you can easily include small charts inside your XPages. As the saying goes, sometimes a picture can speak louder than a thousand words and in this case it really can. Using Peity you can easily insert small, yet effective, charts into your XPages

Do  you know what percentage of  the blog posts on this site are XPages related?

Over 80% of them.

Demonstration

The XPages integration of Peity is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Peity

Introduction

from the website

Peity is less than 5k in size and yet really imposes itself as a big visual improvement to any site. It is HTML5 based which as normal precludes any none-canvas supporting browser. But it does work in Chrome, Firefox, IE9+, Opera, Safari.  With it you can make pie, bar, line or even custom charts by simply adding your data to a <span> element and calling the plugin.

Check out the original Peity demo site for the full information on the plugin.

Peity is one of those jQuery plugins which does not itself use jQuery – but to make it available to the masses it has been wrapped as a jQuery plugin.

Examples

The basic format for creating a Pity image could not be simpler

	<span>1/5</span>

 

	$("span.pie").peity("pie")

How does it work?

The jQuery and Peity JavaScript libraries are added to the database through the WebContents folder. Change the Designer perspective to show the Package Explorer (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder. (You can see the demo database as an example)

The js libraries are added to our XPage Source as follows

	<script src="js/jquery-1.7.1.min.js" clientSide="true"></script>
	<script src="js/jquery.peity.js" clientSide="true"></script>

The examples given on the plugin homepage show that the following options are available:

• Chart Type with options
  • pie
    •  colours,diameter and delimeter
  • line
    • colour, strokeColour, strokeWidth, delimeter, max, min,width and height.
  • bar
    • colour, delimeter, max, min, width and height
  • custom

Size and color attributes

as an alternate to setting the colour and size using the function call you can add attributes to the chart

	<span data-colour="red" data-diameter="40">1/7</span>

Adding it to your XPage

In the example on the demo site I reused the highCharts fruit custom control to give me some data on the page. I haev added a chart to the page in two ways:

• Using a DbLookup()
• Using some jQuery to add the charts after loading

The line chart is created by adding a computed field to the form. using the readonly=”true” parameter a SPAN is created by the XPage which is exactly what we need for the Peity chart.

The source code to create the line chart looks like this:

	<xp:inputText styleClass="line" id="inputText1" readonly="true">
		<xp:this.defaultValue><![CDATA[#{javascript:@DbColumn(@DbName(), "vwFruit", 2)}]]></xp:this.defaultValue>
	</xp:inputText>
	<script>
		$("[id$=inputText1]").peity("line")
	</script>

The Pie Charts are inserted into the viewPanel by using the following process:

• Select all the table cells  in the 2nd column of the table (except for the first row)
• Cycle through the values and total the column
• Cycle through the table cells again and replace the Table contents with
  • The existing text and a SPAN (class .pie) containing the value / the total
• Create the Peity pie charts for all matching elements (.pie)

And that looks like this in the code:

	var total=0
	var sTemp=""
	//get the total
	$("TABLE[id$=viewPanel1] TR:gt(0) td:nth-child(2)").each(function(i){
		total += parseInt($(this).text())
	})
	//replace the cell with the new contents
	$("TABLE[id$=viewPanel1] TR:gt(0) td:nth-child(2)").each(function(i){
		sTemp = $(this).text()+':    <span data-colour="red" data-diameter="20" class="pie">'+ $(this).text()+"/"+total+"</span>"
		$(this).html(sTemp)
	})
	//create all the Peity pie charts based on the .pie selector
	$(".pie").peity("pie", {
		colours: function() {
		    	return ["#dddddd", this.getAttribute("data-colour")]
		  	},
		diameter: function() {
		    return this.getAttribute("data-diameter")
		}
	  })