Friday, 13 October 2017

Create Animated Progress Circles in XPage using Circliful


For a new XPages application one of the requirements was to present some specific project data in progress circles. In my search I came across Circliful. Circliful is a very easy to use jquery plugin for creating beautiful, responsive and highly customizable animated progress circles. Circliful show data as circle statistics, no images used and is based on SVG and jquery including many options which can be set. For the most simple use you only have to add an element on your XPage with a unique id and an container around it that controls the size of thr circle statistic. It is possibel to set all options as data attributes.
In order to use Circliful, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Circliful.
Below some basic examples using Circliful in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder circliful has been added in the WebContent Folder.
Next the JavaScript and CSS files, circliful2.js and circlifull.css must be included on the XPage or Custom Control. In this example I added the files to an XPage.

<script type="text/javascript" src="circliful/js/jquery.circliful.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle1}" ).circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
halfCircle: 1,
decimals : 0,
foregroundColor : '#30B455'
});
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a beautiful, responsive and highly customizable animated progress circles with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="circliful/css/jquery.circliful.css" />
<script type="text/javascript" src="circliful/js/jquery.circliful.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle1}" ).circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
halfCircle: 1,
decimals : 0,
foregroundColor : '#30B455'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle2}" ).circliful({
animationStep: 2,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
decimals: 0,
fillColor: '#cce6ff'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:progress}" ).circliful();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:progress2}" ).circliful();
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="row">
<div class="col-lg-2">
<div id="circle2"></div>
</div>
<div class="col-lg-2">
<div id="progress" data-dimension="200" data-fontsize="36" data-percent="65" data-foregroundcolor="#30B455" data-bgcolor="#eee" data-width="15" data-bordersize="15" data-animationstep="2"></div>
</div>   
</div>
<br></br>
<div class="row">
<div class="col-lg-2">
<div id="circle1"></div>
</div>   
<div class="col-lg-2">
<div id="progress2" data-dimension="200" data-fontsize="36" data-halfcircle="1" data-percent="35" data-fillcolor="#cce6ff" data-bgcolor="#eee" data-width="15" data-bordersize="15" data-animationstep="2"></div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information and examples: Circliful

2 comments:

  1. Cool, have you try this library. It is simple to use, https://kimmobrunfeldt.github.io/progressbar.js/

    ReplyDelete