Thursday, 22 December 2011

Integrating google interactive charts in visual force page.


<apex:page sidebar="false" >
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
Array.prototype.reduce = undefined;

//Include the below line to load google visualization package
google.load("visualization", "1.1", {packages:["corechart"]});

//Draw Chart using visualization.
var labelAmt ='$'+'10.5';

//Create a data table which is used as input to the chart.
   var data = new google.visualization.DataTable();
//addColumns accepts two parameters of type string.
   data.addColumn('string', 'Name');
   data.addColumn('number', 'Opportunity Amount');
//addrows accepts two parameters of type string and float.
   data.addRows([['test User',10.5]]);

//Optionally we can use the formatter to format number.
   var formatter = new google.visualization.NumberFormat({prefix: '$' ,fractionDigits: 0 });
   formatter.format(data, 1);

//The below line of code is used to create column chart.
//The draw function in chart accepts data and various parameter to change the look anf feel of the chart.
   var chart = new google.visualization.ColumnChart(document.getElementById('chart1_div'));
   chart.draw(data, {colors:['#EA0D23'],'legend':'none',width: 274,title: 'Amount of Closed Opportunity',titleTextStyle:{color: 'black', fontName:'Arial', fontSize:10}, backgroundColor:'#D0ECF8' ,height: 337,vAxis: {maxValue:100, minValue:0},hAxis: {title: labelAmt}});
</script>
<apex:form>
<div id="chart1_div"></div>
</apex:form>
</apex:page>

Use the below link to get more information on column chartsand its properties.
http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html