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 .= ' ';
$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
Step 2: Analize
" />
Step 3: Publish
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!