Below a column chart copied directly from Google Code. Notice the JavaScript array rowData. 



 
<pre name="code" class="js">

 &lt;script type="text/javascript" src="http://www.google.com/jsapi"></script>

 &lt;script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart']});
 &lt;/script>

 &lt;script type="text/javascript">

 function drawVisualization() {

 var rowData = [['Month', 'Bolivia', 'Ecuador',
 'Madagascar', 'Papua Guinea',
 'Rwanda', 'Average'],
 ['2004/05', 165, 938, 522, 998, 450, 614.6],
 ['2005/06', 135, 1120, 599, 1268, 288, 682],
 ['2006/07', 157, 1167, 587, 807, 397, 623],
 ['2007/08', 139, 1110, 615, 968, 215, 609.4],
 ['2008/09', 136, 691, 629, 1026, 366, 569.6]];


 var data = google.visualization.arrayToDataTable(rowData );

 // Create and draw the visualization.

 new google.visualization.ColumnChart
 (document.getElementById('visualization')).
 draw(data,
 {title:"Yearly Coffee Consumption by Country",
 width:600, height:400,
 vAxis: {title: "Pesos"},
 hAxis: {title: "Year"}}
 );
 }

 google.setOnLoadCallback(drawVisualization);

 &lt;/script>


 
</pre>




Below is the same column chart only it is meant to be used in a JSF environment. Notice rowData it is now assigned to a value from a backing bean #{indexBean.chartData} that would accesses SQL database. Your backing bean should return a string formatted to JavaScript array format. 



 
<pre name="code" class="js">

 &lt;script type="text/javascript" src="http://www.google.com/jsapi"></script>

 &lt;script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart']});
 &lt;/script>

 &lt;script type="text/javascript">

 function drawVisualization() {

 var rowData = #{indexBean.chartData}

 var data = google.visualization.arrayToDataTable(rowData );

 // Create and draw the visualization.
 new google.visualization.ColumnChart
 (document.getElementById('visualization')).
 draw(data,
 {title:"Yearly Coffee Consumption by Country",
 width:600, height:400,
 vAxis: {title: "Pesos"},
 hAxis: {title: "Year"}}
 );
 }

 google.setOnLoadCallback(drawVisualization);

 &lt;/script>

 
</pre>



The only problem you will encounter is in formatting your data into a string of JavaScript array format. 


 To test, copy the value of Google Javascript rowData array and paste it into your backing bean, return the string back your JSF page. Leave comments if you need some help.




Good luck.

How to use Google Visualization charts in JSF environment using SQL data