Jquery in Xpage - HighChart

Everytime we used to go dojo chart for making the chart in Xpage...

But here is an easy way to make graph and Input translation functionality using Jquery.,

I foung this in Xomino site., It is very useful for chart making in Xpage...

HighChart in Xpage

How to use Jquery in xpage?

Jquery is very efficient for changing the visiblity and UI things...

It is very fast compare to our SSJS.,

Step 1:- Add the following url into Xpage -> resources -> Javascript Library...

"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"

Step 2:- Put the following code into your Xpage you wil find the nice animation and nice funtionality...

Thanks W3Schools

Code:-

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"><p></p>
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
$("#animate").click(function(){
<!-- $("div").fadeTo("slow",0.25); -->
<!-- $("div").fadeOut(4000); -->
<!-- $("#test").animate({left:"100px"},"slow");
$("#test").animate({fontSize:"3em"},"slow");
$("#test").animate({left:"100px"},"slow");
$("#test").animate({fontSize:"1.3em"},"slow"); -->

$("#hide1").animate({left:300},"slow");
$("#hide1").animate({right:300},"slow");
$("#hide1").animate({left:100},"slow");
$("#hide1").animate({right:100},"slow");
<!-- $(this).hide(); -->
});

$("#hide1").click(function(){
<!-- $("div").fadeTo("slow",0.25); -->
<!-- $("div").fadeOut(4000); -->

$("#test").html("W3Schools");
});

});
</script><xp:this.resources>
<xp:script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" clientSide="true">



</xp:script>
</xp:this.resources><div id="test" style="background-color:yellow;height:100px;width:150px">
<xp:inputText id="inputText1" readonly="true">
<xp:this.value><![CDATA[#{javascript:"Hello "}]]></xp:this.value>
</xp:inputText>
</div>
<p id="animate">Click me to animate!</p>
<p id="hide1" style="position:absolute">Click me to hide!</p>


</xp:view>