Introduction
Hello all, so I have been working with Google Visualizations in quite a number of different projects. Before I was running loops that just sent the data to the page and did the rest with javascript. Yesterday I finally started writing a library that would handle all of the javascript and parameters for google visualization. My goal is to make it as easy to use as the CI table library. I call it gVis.
By no means is this library complete, but it does provide a good framework of quickly creating a Google visualizations.
For more information on Google Visualization: http://code.google.com/apis/visualization/documentation/index.html
Download
File:Gvis 0.6.zip
Updates
-1/29/2010
Added set_colors() method. Accepts strings or arrays of colors which can be color names or hexidecimal.
Example:
$this->gvis->set_colors('Pink', '#00d600', 'd66800');
Usage
Add the gVis Library to your “libraries” folder
Add the Google AJAX Library to the header of your page:
<head>
//remove $ before the script
<$script type='text/javascript' src='http://www.google.com/jsapi'></$script>
</head>
Next call the class:
$this->load->library('gvis');
Choose your visualization. The available visualizations so far are:
-AnnotatedTimeLine
-ImageAreaChart
-AreaChart
-ImageBarChart
-ColumnChart
-Guage
-GeoMap
-IntensityMap
-ImageLineChart
-LineChart
-Map
-MotionChart
-PieChart
-ScatterChart
-Table
Please note some of the visualizations require special parameters. Example: GepMap requires country names or abbreviations.
$this->gvis->set_visualization('ColumnChart');
Set your column headers. First parameter is the column type, second parameter is column title.
Available Column types:
-string
-date
-number
$this->gvis->set_heading('date', 'Sent Date');
$this->gvis->set_heading('number', 'Surveys Sent');
Add your data:
$this->gvis->add_row('1/20/2010', 26);
$this->gvis->add_row('1/21/2010', 36);
$this->gvis->add_row('1/22/2010', 85);
$this->gvis->add_row('1/23/2010', 13);
$this->gvis->add_row('1/24/2010', 74);
$this->gvis->add_row('1/25/2010', 24);
$this->gvis->add_row('1/26/2010', 56);
Generate your visualization:
$googleVisualization = $this->gvis->generate();
There are also optional parameters to be set:
$this->gvis->set_height(integer); // default: 200
$this->gvis->set_width(integer); // default: 450
$this->gvis->set_title('string'); // default: ''
$this->gvis->set_is3D(boolean); // default false
$this->gvis->set_legend(string); // default: right, options: top, bottom, left, right, none
$this->gvis->set_colors(string or array); //default: ''
There is still lots to be done on this. I would like to add more validation for the different visualizations, and add more optional parameters.
To be done:
-Accept arrays, and objects with set_header()
-Additonal Optional Parameters to set
-Multiple Visualizations on one page
-Set Parameters with an array
-Add the rest of the column types
Thanks for looking! Tips, comments and criticism always accepted!