gchart

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

Introduction

The purpose of the gchart helper is to provide functions to help with the use of Google's chart api. 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.

Source

<?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;
}

Usage

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;


?>

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

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 Google documentation.

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;

?>

The above code generates this url as the img src: [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) Which looks like this: Image:gchart2.png