Flash Chart Helper

I’ve been using the Flash Chart Helper recently and it’s been working really well once I got a couple of things ironed out with it.

I followed the instructions and copied all the files to the right place. I had the array created and sending what I thought was the correct format of data to be graphed but I was still getting errors. Originally I had this line:

echo $flashChart->begin(array('prototype'=>true));

at the top of my graph. When I removed the option array (because I wasn’t using prototype) it gave me a lovely graph.

Next thing was add labels to the X-axis. My data set was being sent in the following format:

Array ( 
[0] => Array ( 
    [day] => Monday 
    [hits] => 0 ) 
[1] => Array ( 
    [day] => Tuesday 
    [hits] => 15 ) 
[2] => Array ( 
    [day] => Wednesday 
    [hits] => 58 ) 
[3] => Array ( 
    [day] => Thursday 
    [hits] => 23 ) 
[4] => Array ( 
    [day] => Friday 
    [hits] => 23 ) 
[5] => Array ( 
    [day] => Saturday 
    [hits] => 99 ) 
[6] => Array ( 
    [day] => Sunday 
    [hits] => 34 
) )

So I set up

echo $flashChart->setData($logs, '{n}.hits', '{n}.day', 'byDay');
echo $flashChart->axis('x', array('labels' => $logs));

To explain that, $logs is the array of data, {n}.hits is the data to be graphed, {n}.day is the label path, byDay is the name of the graph. The options for the axis are simply the array to pass in to read the labels from.

I then wanted the labels to be vertical so that they wouldn’t overlap. This proved to be a harder thing to fix. In the API on page three of the helper article, it only mentions

axis($axis, $options = array())

I added in the option of

'vertical' => true

but I got an error that the helper couldn’t find the set_vertical() function. After some digging around in the source, I found that the real way to pass label options was as a third variable to the axis function. So I edited my call to read

echo $flashChart->axis('x', array('labels' => $logs), array('vertical' => true);

and lo and behold, vertical labels!

Problems with AJAX and IE

I had set up a page with a nice drag and drop interface and it worked lovely in Firefox and Opera. But when I went to try it in IE, it would work once and then not again.

What was happening was that after the drop, the page would refresh and the drop area would be created again inside of the old one. Firefox ignored it but IE decided that it wanted things to be right for a change.
So adding this little bit of code between script tags:

if (document.all) { Droppables.drops = [] }

before the creation of the drop area meant that it would clear out the area for a new one to be created.

This page has the full explanation:
AJAX problem with drag and drop for Internet Explorer using Scriptaculous

Drag and Drop ordering

Here is a very useful link that walks you through how to create a simple drag and drop section for a website. It creates a list and lets you move items around the list so that you can order them as you wish. With a little bit of CSS, this could turn into a really nice simple organiser.

http://dustinweber.com/cakephp/cakephp-sortable-ajax-drag-drops-the-basics/

I did find that I had to edit my javascript includes a little bit though. I had the scriptaculous libraries loaded with this tagged on at the end
?load=effects
With this in place, I was getting errors that sortable wasn’t defined. Once I removed it, it all worked perfectly.

Using autocomplete and Scriptaculous

Using this fine page as a reference (http://metapundit.net/sections/blog/ajax_autocomplete_with_scriptaculous), I finally got the autocomplete function working as I wanted.
I wanted to show a venue with some extra info in brackets and when it was selected, to update a hidden input with the id of the venue from the database.

The secret to this was realising that even though I was passing the id of the link tag, it was numberical which is not allowed. So following metapundit’s advice, I added auto_ to the front of the id value. This was then stripped off with javascript and the number put into the hidden input.

Also, a nice thing about the scriptaculous autocomplete is that if you want to show extra info but not have it passed to the page, enclose it in

Having problems moving from localhost to remote server

I have part of my application working nicely now and it mostly does what I want. But that is only on my localhost. When I copy it up to the remote server, most of it runs. It’s only when I try to update the page with an AJAX call that I get:

Not Found

The requested URL was not found on this server.
Apache Server at Port

I know I ran into this problem before, but can I remember how to fix it? Not on your nelly.

Oh well, at least if I get it fixed this time, it will be logged here for me to remember!

Leave an empty option at the top of a select element

In 1.2, when you use the $form->input() function to create a select element, it no longer creates the empty value at the top.
To get this back, simply pass the empty variable back and set it as true.


echo $form->input('category_id', array('empty' => true));