See below how you like the Google Column chart Visualization. Sounds like fun ? Yeah it is lot more fun than we can think ;)
The visualizations have evolved over a period of time now. The GV moved to "corechart" packages in their implementation.
Sounds Obtuse? Well read on to crack the nut !
Have a look at the graphs rendered with the old and new packages below.
NOTE: It is a common error with GV (Google Visualizations) that the charts do not render as expected in versions of IE.
I had a chance to debug and achieve the functioning of GV in IE 9 as well. In the post following we would see how to implement the GV column chart and also, how to over come when faced with known issues.
|
|
| With Old Package |
With New Package |
Lets Get Started !!!
Here is the code snippet for a GV implemented with the old Google packages like "Column Chart".
<apex:page >
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.0", {packages: ["columnchart"]});
google.setOnLoadCallback(drawLineChart);
var data = new Object();
function drawLineChart() {
data = new google.visualization.DataTable( eval( '({cols: [{id: "col1", label: "Name", type: "String"},{id: "col3", label: "2013", type: "Number"},{id: "col4", label: "Budget", type: "Number"},{id: "col5", label: "Forecast", type: "Number"}], rows: [{c:[{v: ""},{v: 5341.0},{v: 0.0},{v: 0.0}]}]})' ) );
var chart = new google.visualization.ColumnChart( document.getElementById('page:form:chart_div') );
chart.draw(data,
{width: 500,
height: 250,
legend: 'right',
title: 'YTD Sales Summary',
is3D : false,
colors : [],
borderColor : 'white',
focusBorderColor : 'gold',
titleX:'YTD',
titleY:'USD',
titleColor:'Black'
});
var listenerBody = "";
if(listenerBody != ''){
var selectListener = new Function("e", listenerBody);
google.visualization.events.addListener(chart, 'select', selectListener);
}
}
</script>
</head>
<body>
<div style="width: 500px;" id="page:form:chart_div"><iframe id="GChart_Frame_0" height="250" marginHeight="0" frameBorder="0" width="500" name="GChart_Frame_0" marginWidth="0" scrolling="no"></iframe></div>
</body>
</html>
</apex:page>
The code snippet below is the function that is responsible for drawing the chart with the data provided.
function drawLineChart() {
data = new google.visualization.DataTable( eval( '({cols: [{id: "col1", label: "Name", type: "String"},{id: "col3", label: "2013", type: "Number"},{id: "col4", label: "Budget", type: "Number"},{id: "col5", label: "Forecast", type: "Number"}], rows: [{c:[{v: ""},{v: 5341.0},{v: 0.0},{v: 0.0}]}]})' ) );<br/>
**Here we define the columns and the data types of the columns to pass the data and add "Rows".
NOTE: In the New Google Viz the package has been changed to "corechart".
google.load("visualization", "1.0", {packages: ["corechart"]});
NOTE: The data types have become case sensitive. Example "string" instead of "String".
Else the charts do not render in IE.
function drawLineChart() {
data = new google.visualization.DataTable
( eval( '({cols: [{id: "col1", label: "Name", type: "string"}
,{id: "col3", label: "2013", type: "number"}
,{id: "col4", label: "Budget", type: "number"}
,{id: "col5", label: "Forecast", type: "number"}], rows: [{c:[{v: ""},{v: 5341.0},{v: 0.0},{v: 0.0}]}]})' ) );
To Populate the data from Salesforce Database using java script remoting, check this out.
Visualforce charts with Javascript Remoting
In my next post we would take-up importing Google Visualization Project.
