Skip to content

gVis Google Visualization

Jump to bottom Edit New page
Derek Jones edited this page Jul 5, 2012 · 6 revisions

Introduction Hello all, so I have been working with Google Visualizations quite a bit in 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 options for google visualization and worked as easily as the CI table library. I call it gVis.

Usage By no means is this library complete, but it does provide a good framework of quickly creating a google visualization chart.

For more information on Google Visualization: [url]http://code.google.com/apis/visualization/documentation/index.html[/url]

Add the Google AJAX Library to the header of your page:

<head>
    [removed][removed]
</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_header('date', 'Sent Date'); 
$this->gvis->set_header('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(number);
    $this->gvis->set_width(numer); 
    $this->gvis->set_title('string');
    $this->gvis->set_is3D(boolean); 
    $this->gvis->set_legend(string) // top, bottom, left, right, none

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

Thanks for looking! Tips, comments and criticism always accepted!

Add a custom footer
Add a custom sidebar
Clone this wiki locally