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.
Lets Get Started !!!
Here is the code snippet for a GV implemented with the old Google packages like "Column Chart".
The code snippet below is the function that is responsible for drawing the chart with the data provided.
NOTE: In the New Google Viz the package has been changed to "corechart".
NOTE: The data types have become case sensitive. Example "string" instead of "String".
Else the charts do not render in IE.
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.
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/>
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.
