Skip to content

gVis Google Visualization Library

World Wide Web Server edited this page Jul 4, 2012 · 14 revisions

[b]Introduction[/b] 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: [url]http://code.google.com/apis/visualization/documentation/index.html[/url]

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: [code]$this->gvis->set_colors('Pink', '#00d600', 'd66800'); [/code]

Usage Add the gVis Library to your "libraries" folder

Add the Google AJAX Library to the header of your page: [code] <head> //remove $ before the script <$script type='text/javascript' src='http://www.google.com/jsapi'></$script> </head> [/code]

Next call the class: [code]$this->load->library('gvis'); [/code]

Choose your visualization. The available visualizations so far are: -AnnotatedTimeLine -ImageAreaChart -AreaChart -ImageBarChart -ColumnChart -Guage -GeoMap -IntensityMap -ImageLineChart -LineChart -Map -MotionChart -PieChart -ScatterChart -Table

[i]Please note some of the visualizations require special parameters. Example: GepMap requires country names or abbreviations.[/i]

[code]$this->gvis->set_visualization('ColumnChart'); [/code]

Set your column headers. First parameter is the column type, second parameter is column title. Available Column types: -string -date -number

[code] $this->gvis->set_heading('date', 'Sent Date'); $this->gvis->set_heading('number', 'Surveys Sent'); [/code]

Add your data: [code] $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); [/code]

Generate your visualization: [code] $googleVisualization = $this->gvis->generate(); [/code]

There are also optional parameters to be set: [code] $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: '' [/code]

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!

Clone this wiki locally