Seeking understanding and tools I need to design a homepage that is a dynamic bar chart.

September 15, 2011 10:37 AM

This weekend I'm setting up a website for an academic event. I'd like the homepage of the site to have large, clickable progress bars that display the number of posts for each of the subpages (News & Announcements, Blog, Events, etc.). As more posts are added to each of the subpages (posts would likely be sorted and displayed by category and tag), its respective progress bar takes up more screen real estate and the tally count listed on/near it increases. Basically, I want the homepage to look like a giant, dynamic bar chart. Is there a freeware (or cheap) template, widget or piece of code that allows me to do this?

One aspect of the event theme is visualization and free, easy implementation of available tools, so we want to create the event (website, etc.) in the same form. And I have no budget. I could also use all the help, suggestions and resources I can find for how to hack apart an almost-there template (oh, where are you, almost-there template?), including which platform (Blogger or Wordpress) would be best suited for doing this. For example, doing something similar in the past, I remember there was a browser tool that let you change the code and see the result as you codey-changy...what was that called? What other tools do I need?

My plan is to hunker down this weekend and build this thing (and learn a bunch of other things in the process). I have a well-defined design layout/plan. I'm also rudimentarily familiar with both blogging platforms, widgets, basic HTML, SQL, some CSS and computer/internet things more generally.

posted by iamkimiam to computers & internet (7 answers total)

I don't want to burst your bubble, but that sounds like potentially a lot more work than a weekend project. If you're not yet familiar with the differences between Wordpress and Blogger, there's probably a lot you'll be needing to learn if you choose either platform. I belive the "codey-changy" thing you're talking about is either Firebug or the Web Dev toolbar on Webkit, but if you're not already familiar with those, I don't know if a weekend of hunkering down is enough, unfortunately.
posted by gramcracker at 11:08 AM on September 15, 2011

At the "piece of code" level, if you don't find anything easier, I would use something like gRaphaël. The almost-there template would be this demo page.

As a really high-level handwavey plan, you would need to

1. Save the gRaphaël stuff and the demo page to your desktop, figure out how to put those pieces together to get it working and fiddle around with the code of the demo page to learn how to change the height of the bars
2. On whatever platform and web host you're using, for starters just figure out how to get the numbers of posts on each sub-page to show up (just the straight digits of the number; how to do this will depend on what platform you're using)
3. Get your modified demo page up on the server and working as a flat HTML page, to make sure that you've got all of the javascript files and paths correct
4. Figure out how to insert custom HTML/javascript into the site's home page (again depends on what platform you're using)
5. Add the demo page's code to the site's home page and rig it up so that those numbers of posts for each the subpages are used in the javascript code to control the heights of the bars

However, like gramcracker said, from the level of familiarity with these things that you're expressing, this would probably be a whole lot more than a weekend project to do.
posted by XMLicious at 12:22 PM on September 15, 2011

If you want to honor the visualization aspect of the event, *don't* do so by creating pretty bars that don't actually represent meaningful data. (No attendee is wondering "How many blog posts on the event's web site are in the events category versus the news category?")

Instead, honor great visualizations by featuring those visualizations. Focus on the quality of the content and have a site that is neat, clean and gets out of the way of the information. People will be much more pleased with meaningful, thoughtful writing about the significance of the academic event than they will be with your I-just-learned-this templating skills.

Take the time you'd waste this weekend on hacking PHP and javascript, and spend it pre-writing a bunch of smart, graphically-rich blog posts and news items that you can (with minimal updating and customization to make sure they're current) then publish throughout the event, having people wondering "When did she have time to do all this awesome, insightful background information about the session I just attended?!"
posted by anildash at 12:58 PM on September 15, 2011 [2 favorites]

I don't know if this additional info helps, but I'm fairly experienced with both Blogger (7+ years) and Wordpress (2 years). I've tinkered a fair bit with the templates as well, deconstructing them and customizing how I want. I just haven't done it in a while though, and couldn't remember the tools (it was the Web Dev toolbar I used, thanks).* I'm not sure if it's that I didn't represent my background accurately, or that I did but that the task is really that over my head (which would be my misunderstanding and I fully accept that).

anildash, thank you so much for the sound advice. You are exactly right about the importance of focusing on the quality of the content. It's good advice for all design or engineering endeavors. In this particular case, the visualization IS the content and the labels I gave for the bars aren't necessarily the actual ones that will be used...I didn't want to divulge a bunch of information about the actual event. For three of the bars (there are only 4), the 'content' is more akin to a submission from a reader rather than a blog post. And people will be just as interested in the tally as in the content. I'm really striving to keep this simple...4 bars on the home page, leading to 4 pages of 'content'. And a 'legend' (sidebar), which is simply a link list of the 4 pages and a contact link. Logo, top banner, done.

Please correct me if I am wrong (and attempting to answer my own question), but I am almost wondering if this couldn't be done more simply and within the existing blog framework? Let's say, with each blog Post assigned to certain Category. Each Category is represented as its own Page. Each Page represented as a big, clickable 'button' on the home page. Each 'button' being a rectangular box. Each rectangular box regularly and manually updated with the width of the boxes and the text that hovers over them (the tally) as a percentage of the width of the page in pixels (i.e. If there are 23 submissions/Posts in Category X and the webpage is 1000 pixels wide, then the rectangular box on the home page that is called Category X extends 230 pixels from the left. When you click the box, you get taken to the Category X page, where you can read all the submissions).

Of course, it'd be nicer if there were a piece of code that pulls the number of posts assigned to Category X, does the math and represents that visually by adjusting the width of that color box. But I'm happy to update the template for the width of the 4 bars once a week as well.

Is this solution sound? Is this doable?
posted by iamkimiam at 3:30 PM on September 15, 2011

I don't think this feature you're describing has anything to do with a blogging platform. Not to say that you can't build it as part of a blog, but it's not going to be something you'll find on a template or that will lend itself to one platform over the other.

That said, I know Wordpress/PHP, so here's how I'd do it in that:

- Using any template that you like, set up the categories as you've described.
- On the index page, create your 4 rectangle boxes in plain old HTML ("CatA_button", "CatB_button", etc). Let's say each is 1000 px wide and 50 px high. Add another div inside each one ("CatA_bar", "CatB_bar", etc) with a height of 50 px and a width of 0, float left. Give it a background color.
- Write a PHP function to query the number of posts in each category on page load and assign it to a variable (eg, $CatA_postnumber, $CatB_postnumber, etc.)
- In Javascript, pull in the PHP variable, do the necessary calculations, and spit out the CSS to define the width of "bar". So if CatA has 25 out of a possible 100 posts, you could assign "CatA_bar" a width of 250 px. All of this will be calculated in a split second on page load, and it would refresh whenever the page is reloaded.
- You could also add an absolutely positioned div inside of each button div to hold your post counts (the PHP variables).

I've simplified the steps a lot but that's the basic process I'd use to create the bit of code you described. I'm by no means a Javascript expert and this seems pretty straightforward to me, so you should be okay with figuring it out in a weekend. I actually tried to paste bits of code in as examples but they didn't show up, so if you're completely lost on something, send me a message.
posted by ella wren at 5:05 PM on September 15, 2011

If you're going to be updating it manually, then if you Google for something like "bar chart div html" you'll get lots of results and all you should need to do is save off the sample CSS and HTML files and there should be values in the HTML code for setting the heights and labels of the bars. Here's Eric Meyer's version, for example - he's a big web design guru and makes it look all fancy and pretty but there will be other ones with simpler code out there if you want.

(This is basically what ella wren is describing, plus she's suggesting PHP code that would update the bar heights automatically instead of you having to do it manually.)
posted by XMLicious at 5:44 PM on September 15, 2011

Thanks, ella and XMLicious! This sounds fairly straightforward and doable. Unfortunately, it may get put off a few days, as I am now derailed onto finding and removing malware on another website I run. Good times.
posted by iamkimiam at 4:31 AM on September 16, 2011