gchart

Category: Helper::Community | Category:Helper::Charts

[h3]Introduction[/h3] The purpose of the gchart helper is to provide functions to help with the use of [url=http://code.google.com/apis/chart/]Google's chart api[/url]. Currently, the only function in the helper is extendedencode(). To use the gChart api, one generates a series of HTTP GET parameters attached to a google url, which returns an image. The most complicated part of generating this url is encoding the data that represents the chart. This helper makes that easy.

[h3]Source[/h3]

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

/**
* CodeIgniter
*
* An open source application development framework for PHP 4.3.2 or newer
*
* @package      CodeIgniter
* @author       Rick Ellis
* @copyright    Copyright (c) 2006, EllisLab, Inc.
* @license      http://www.codeigniter.com/user_guide/license.html
* @link         http://www.codeigniter.com
* @since        Version 1.0
* @filesource
*/

/**
* CodeIgniter gChart Helper
*
* @package      CodeIgniter
* @subpackage   Helpers
* @category     Helpers
* @author       Isaac Vetter
*/

/**
* ExtendedEncode
*
*  Encodes an array of values using the extended encoding:
*     http://code.google.com/apis/chart/#extended_values
* @access  public
* @param   array
* @param   referencedstring
* @return  string
*/
function extendedencode($data, &$maxvalue='notspecified')
{
    $grid = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
        'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
        'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
        'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',
        'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', '.');

    // try to find reasonable maximum value
    if(is_numeric($maxvalue)){
        // assume below manipulations are better than what caller is doing
        $max = ceil($maxvalue);
    } else {
        $max = ceil(max($data));
    }
    $precision = strlen($max) - 1;
    $maxvalue = ceil($max/pow(10,$precision));
    $maxvalue = $maxvalue * pow(10, $precision);

    $multiplier = (float)(count($grid) * count($grid)) / $maxvalue;

    $ret = '';
    for($i=0;$i<count($data);$i++){
        if(!is_numeric($data[$i])){
            $ret .= '__';
        } else {
            $datum = $data[$i] * $multiplier;
            $x = (int)($datum / count($grid));
            $y = $datum % 64;
            $ret .= $grid[$x].$grid[$y];
        }
    }
    return $ret;
}
?&gt;

[h3]Usage[/h3] Here's an example of how to use this helper to generate a chart. To begin using it, add the following code to your controller:

$this->load->helper( 'gchart' );

Next, add the following bit of code to your view where you would like to display the chart:

<?php 

$encoded_data = extendedencode(array(0, 1, 2, 3, 4, 5, 6), &maxvalue;); 

echo <<< EOS
     <img src="
        http://chart.apis.google.com/chart?
            cht=lc
            &chs=250x250
            &chd;:e{$encoded}
        "
        alt="line graph of some example data"
    />
EOS;


?&gt;

The above code generate this url as the img src: [url=http://chart.apis.google.com/chart?cht=lc&chs=250x250&chd=e:AAKqVVgAqq1VA]http://chart.apis.google.com/chart?cht=lc&chs=250x250&chd=e:AAKqVVgAqq1VA[/url]

Which looks like this: Image:gchart.png The Google Chart API is pretty awesome. The above really doesn't do it justice. You should read the [url=http://code.google.com/apis/chart/]Google documentation[/url].

Here's a more complicated example:

<?php 

$encoded = extendedencode(array(3.6, 1, 2, 1.5, 4.0, 5.6, 2.3), &$maxvalue);
$halfmaxvalue = $maxvalue / 2;
$chart = <<< EOS
     <img src="
         http://chart.apis.google.com/chart?
            cht=bvg
            &chs=300x400
            &chd=e:{$encoded}
            &chxt=x,x,y,y
            &chxl;=
                0:|Jan|Feb|Mar|Apr|May|June|July|
                1:||Months||
                2:|0|{$halfmaxvalue}|{$maxvalue}|
                3:||||(in bazillions)|Traffic||
            &chf=c,ls,0,FFFFFF,.5,EEEEEE,.5
        "
        alt="line graph of some dummy example data"
    />
EOS;

print $chart;

?&gt;

The above code generates this url as the img src: [url=http://chart.apis.google.com/chart?cht=bvg&chs=300x400&chd=e:mZKqVVQAqq7uYi&chts=b1946c,20&chxt=x,x,y,y&chxl=0:|Jan|Feb|Mar|Apr|May|June|July|1:||Months||2:|0|3|6|3:||||(in bazillions)|Traffic||&chf=c,ls,0,FFFFFF,.5,EEEEEE,.5]http://chart.apis.google.com/chart?cht=bvg&chs=300x400&chd=e:mZKqVVQAqq7uYi&chts=b1946c,20&chxt=x,x,y,y&chxl=0:|Jan|Feb|Mar|Apr|May|June|July|1:||Months||2:|0|3|6|3:||||(in bazillions)|Traffic||&chf=c,ls,0,FFFFFF,.5,EEEEEE,.5[/url] Which looks like this: Image:gchart2.png