2 minutes, 31 seconds

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.

// 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 .= ''.$axes.': ';
	$formHTML .= '';

	// loop through evey axes value and check for
	// posted value so folks can easily tweak graphs
	$i = 1;
	while ($i < 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&chs=500x400&";
$imgSrc .= "chd=t:".implode(",",$postedAxes).",".array_shift($postedAxes)."&";
$imgSrc .= "chco=669933&";
$imgSrc .= "chls=2.0,4.0,0.0&";
$imgSrc .= "chxt=x&";
$imgSrc .= "chxl=0:|".implode("|",$options)."&";
$imgSrc .= "chxr=0,0.0,360.0&";
$imgSrc .= "chm=B,66993380,0,1.0,5.0&";
$imgSrc .= "chg=25.0,25.0,4.0,4.0&";
$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:

Salad Maker

My friend over at The 
Worst Thing in the World (TWTITW) recently had a  
post 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 
blog
.

Go forth, make your salad, rate it, and use this form to 
publish your salad's findings (or is that finding your
 salad?).

* - Subject to TWTITW's whim and research

Step 1: Data Entry

Salad Name: 








Step 2: Analize
" />

Step 3: Publish
<img class="lazy" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="<?= class="lazy" $imgSrc ?>" />

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!