Google Visualization APIs with Salesforce

Google Visualization API samples being used with Salesforce

Good thing about this is that these are available for public sites as well where we cannot use Reports and Dashboards. Refer to Google Charts here and here

Here are two sample pages (link1 and link2) displaying charts on Salesforce public site.

To see the code install this unmanaged package; open "Google Charts" Apps and select Chart1 and Chart2 tabs. The code uses Google Visualization project from Code Share. Here are the sample images of Google Charts being used on Salesforce public site.

Adding a wait screen for Salesforce AJAX request

While working on one of the Sites project in Salesforce, a requirement was that clicking on checkbox against a row in the table, it should create a record and then reload the table without refreshing the complete page. Everything was simple but one of the requirement was to show a wait screen when user clicks on checkbox. Searching around, I came across this implementation - http://jsfiddle.net/jonathansampson/VpDUG/170/ 
I really liked this implementation - simple, clean and minimal. Referring to this I did the implementation in my Salesforce page.

What I used
As in the example, I used jQuery, a cool cool js library to get this working. Add javascript library to your static resources and inside the script tag on your page define j$ variable as
var j$ = jQuery.noConflict();

Here are the steps:

• Add a div tag to the end of page.

<div class="modal"></div>​

• Add style tag to the page with following contents

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}​

• Create an actionFunction tag based on your requirements. tableList is the id of table that gets re-rendered after AJAX request. Note that we are using onComplete event too.

<apex:actionFunction name="jsActionFunction"  action="{!ServerSideFunction}"  rerender="tableList" oncomplete="jsDoConsiderMeComplete()">
    <apex:param name="eid" value=""/>
    <apex:param name="eName" value=""/>
</apex:actionFunction>
​

• Set the onClick event of inputCheckbox

<apex:inputCheckBox value="{!lst.isChecked}" id="chkbx1" onclick="checkBoxClick('{!lst.eId}', '{!lst.eName}')" />

• Create a javascript function that first displayed the wait screen and then calls the actionFunction method. Another function to hide the wait screen.

function checkBoxClick( eId, eName ) {
    j$('body').addClass("loading");
    jsActionFunction(eId, eName);
}
function jsDoConsiderMeComplete() {
    j$('body').removeClass("loading"); 
}

Make these changes, save the page, fix the issues if any and it should work just the way it is working in the sample page.