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 < 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:
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!