Monthly Archives: May 2009

Toss Your Salad Code

Leave a reply

After my friend over at The Worst Thing in the World (TWTITW) recently had a post about Radar charting a salad’s many axes, I thought it’d be funny to write a page that actually made the graphs. I’d been meaning to write a post about using Maxmind’s GeoIP library and data to do heat map of web activity, but this will be a good warm up. Behold the fully functional Plip Salad Tosser.

Let’s take a look at the components of the Tosser:

The Chart: I like using APIs that are easy, make me look good, and are well documented. That’s why I love Google’s Chart API. For this page I used a their radar chart and referenced which features are available at the handy chart feature matrix. A few nice touches were adding the dotted lines and the extra data point to complete the loop (is a that radar chart faux pas?).

Arrays and quick forms: Arrays are really handy. They make a form like these easy to change and you can implode them like mad for loop-less string creation of chart labels and the like. Further, you can bust out a quick loop to check for posted values or init random values for the form. WAY easier than hard coding the HTML and making edits over and over again.

Final Product: Here’s a salad radar chart made from step 3, Publish!

PHP: Here’s the top part of the page which does the actual form processing and image source concatenating.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

// seed all options
$options = array(
		'Architectural',
		'Conceptual',
		'Cultural',
		'Financial',
		'Gustatory',
		'Logistical',
		'Taxonomic',
	);
 
// see if they want a random one
if (isset($_POST['No,_no,_wait____toss_me_a_random_salad!'])){
	unset($_POST['d']);
}
 
// hand POST or init
if (isset($_POST['d'])){
	// grab vals if posted, pull name into local
	// and unset name for easy imploding below
	$postedAxes = $_POST['d'];
	$name = $postedAxes['name'];
	unset($postedAxes['name']);
} else {
	// init empty chart
	foreach ($options as $axes){
		$postedAxes[$axes] = rand(1,100);
	}
	$name = "Random Chart";
}
 
// seed drop down vals
$i = 1;
while ($i < 101){
	$dropValsRaw[] = $i++;
}
 
// build up form HTML by looping through
// every axes
$formHTML = "";
foreach ($options as $axes){
	$formHTML .= '<label for="Architectural">'.$axes.':</label> ';
	$formHTML .= '';
 
	// loop through evey axes value and check for
	// posted value so folks can easily tweak graphs
	$i = 1;
	while ($i &lt; 101){
		if ($i == $postedAxes[$axes]) {
			$formHTML .= "$i";
		} else {
			$formHTML .= "$i";
		}
		$i++;
	}
	$formHTML .= $dropValsHTML;
	$formHTML .= '';
	$formHTML .= '
';
}
 
// concat final img src and use
// implode along the way where needed
$imgSrc  = "http://chart.apis.google.com/chart?";
$imgSrc .= "cht=r&amp;chs=500x400&amp;";
$imgSrc .= "chd=t:".implode(",",$postedAxes).",".array_shift($postedAxes)."&amp;";
$imgSrc .= "chco=669933&amp;";
$imgSrc .= "chls=2.0,4.0,0.0&amp;";
$imgSrc .= "chxt=x&amp;";
$imgSrc .= "chxl=0:|".implode("|",$options)."&amp;";
$imgSrc .= "chxr=0,0.0,360.0&amp;";
$imgSrc .= "chm=B,66993380,0,1.0,5.0&amp;";
$imgSrc .= "chg=25.0,25.0,4.0,4.0&amp;";
$imgSrc .= "chtt=$name";

HTML: Below the PHP I have some descriptive text and a few headers and then I output the fruit of our lil’ scripts labor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<H1>Salad Maker</H1>
 
<p>My friend over at <a href="http://twtitw.firebus.com/">The 
Worst Thing in the World (TWTITW)</a> recently had a  
<a href="http://twtitw.firebus.com/node/85">post</a> about the  
axes of salad complexity.  Based on their findings of 7 axes*, 
I wrote a lil' form to enter and toss your own salad. Read  
up on the code behind this page over at yon 
<a href="http://plip.com/blog/toss-your-salad-code/">blog</a>
.</p>
 
<P>Go forth, make your salad, rate it, and use this form to 
publish your salad's findings (or is that finding your
 salad?).</P>
 
<I>* - Subject to TWTITW's whim and research</I>
 
<h2>Step 1: Data Entry</h2>
<form action="/salad/" method="POST">
<label for="name">Salad Name:</label> 
<input name="d[name]" type="text" size="20" id="name" value="<?= $name ?>" />
<br />
<?= $formHTML ?>
<input name="Toss Mine!" value="Toss Mine!" type="submit"/>
<input name="No, no, wait....toss me a random salad!" 
	value="No, no, wait....toss me a random salad!" type="submit"/>
</form>
 
<h2>Step 2: Analize</h2>
<img src="<?= $imgSrc ?>" />
 
<h2>Step 3: Publish</h2>
<textarea cols="70" rows="7"><img src="<?= $imgSrc ?>" /></textarea>
 
<style type="text/css">label { display:block; width:150px; float:left; }</style>

Final Thought: Projects like this that take about two hours are fun and very gratifying for me. Leveraging existing code bases like Google’s Chart API is a great way to make a friend’s funny blog post into a fun educational experience that looks snazzy. Send in questions or comments!

FacebooktwitterredditpinterestmailFacebooktwitterredditpinterestmail