Sunshine: Google Visualizations Column Chart Snippet

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.

Sunshine

Pages

30 January 2013

Google Visualizations Column Chart Snippet

2 comments: