Installing the jqplot plugin for Agile Toolkit

Download and extract the plugin for jqplot

The addon consists of the following directory structure. Note that the sterling folder will allow future addons created by Sterling Endeavours to be grouped together.

The /atk4-example/atk4-addon/sterling/lib/jqplot.php file contains the php functions such as set

The /atk4-example/atk4-addon/sterling/jqplot/templates/js/jqplot_helper.js is a javascript file which allows the php code to call the javascript library.

The /atk4-example/atk4-addon/sterling/jqplot/templates/js/jqplot contains the extract of v1.0.0b2_r792 of jqplot. You can upgrade jqplot by extracting a later version into the same directory. The latest version can be found at jqplot.

Modify Frontend.php

        $this->add('Menu',null,'Menu')
            ->addMenuItem('Welcome','index')
            ->addMenuItem('How Do I..?','how')
            ->addMenuItem('Database Test','dbtest')
            ->addMenuItem('Auth test','authtest')
            ->addMenuItem('about')
            ->addMenuItem('logout')
            ;

        $this->add('Menu',null,'Menu')
            ->addMenuItem('Welcome','index')
            ->addMenuItem('How Do I..?','how')
            ->addMenuItem('Database Test','dbtest')
            ->addMenuItem('Auth test','authtest')
            ->addMenuItem('jqPlot','mypage')
            ->addMenuItem('about')
            ->addMenuItem('logout')
            ;

Also in Frontend.php, we need to modify the places where Agile Toolkit looks for various files such as .js, .css etc.. find

        $this->addLocation('atk4-addons',array(
                    'php'=>array(
                        'mvc',
                        'misc/lib',
                    )))
            ->setParent($this->pathfinder->base_location);

        $this->addLocation('atk4-addons',array(
                    'php'=>array(
                        'mvc',
                        'misc/lib',
                        'sterling/jqplot/lib',
                        ),
                    'css'=>array(
                         'sterling/jqplot/templates/js/jqplot',
                        ),
                    'js'=>array(
                         'sterling/jqplot/templates/js/jqplot/plugins',
                         'sterling/jqplot/templates/js/jqplot',
                         'sterling/jqplot/templates/js/',
                    )))
            ->setParent($this->pathfinder->base_location);

Add additional tags in shared.html

The file /atk4-example/atk4/templates/shared/shared.html contains the structure for all pages in our website created with Agile Toolkit. We dont want to modify the one on the atk4 directory as if we later upgrade, we will loose the changes so instead we need to copy this shared.html to /atk4-example/templates/default and we can modify our copy. In here there are already tags for js_include and ie_include but we need to add an extra one for css_include.

If we were going to use graphs on every page of our site, we could add the includes directly here but ideally we want to only load the .js libraries when we need them so it's better to load them only on the pages we need them and then only the plugins for the kind of graph we need. Look for the code ..

        <link rel="stylesheet" type="text/css" href="<?template?>css/atk-custom.css<?/?>" />
		<?$js_include?>

        <link rel="stylesheet" type="text/css" href="<?template?>css/atk-custom.css<?/?>" />
		<?$css_include?>
		<?$js_include?>

Update jquery to version later than 1.5.1

In testing, although everything worked fine on Firefox 3.6, IE8, Google Chrome 13.0 and Safari 5.1 all on Windows 7,I noted that there was an issue with jquery and jqplot when viewed on Safari 5.0 in ipad so i installed a version of safari 5 on windows and was able to recreate the problem.

See here for some statistics on browser usage by type and version dated June 2011 .

Safari 5 is the browser used on Ipad 2 and is not upgradeable until there is OS upgrade so this is an issue. The version of jquery installed with agile toolkit is 1.5.1 but there are a couple of later versions so i tried each of them and the issue is partially fixed in jquery 1.5.2 onwards including the latest version at the time of writing this which is jquery 1.6.2.

To upgrade the version of jquery in agile toolkit, download the latest jquery minified version.

Save the file to /atk4-example/atk4/templates/js/jquery

Modify the /atk4-example/config-defaults.php file to have the following lines

$config['js']['versions']['jqueryui']='1.8.7.min';
$config['js']['versions']['jquery']='1.6.2.min';

This determines which version of jquery and jquery.ui are used by agile toolkit.

As noted, this only partially solves the problem on Safari 5.0. The graphs will now display but will only show at about half the width they should even though the axis will be the size of a DIV we specify. I dont have a full solution but found by accident that if i put the chart in a table rather than a div and set only width but not height, it will display correctly on Safari 5.0 as well as on the other browsers so it's a compromise but gives the greatest cross browser compatibility. If you dont want a table and are not worried about ipad/Safari 5.0 compatibility for your website, you change the defaultTemplate of atk4-addons/sterling/jqplot/lib/jqplot.php to ChartDiv