Creating easy animated graphs

The non-profit organization was so impressed with your alert sticky post solution, they've allocated some funds together and have got another request for you. They noticed how you fixed up the alert icon using Inkscape and they've asked you how much trouble it would be to generate a monthly graph for them for another post they put up. The post is their top five stats from their green recycle program.

While the bulleted list is super easy for the site administrator to implement, people don't really notice or remember the information, so they were thinking of posting graphs to the site, but need someone to draw them or generate them in some way.

Looking through their site, you notice the editor always consistently formats the information posted. All post titles have "... Monthly Stats" in them, all the information is in bullets, and the percentage number always comes after a colon ":". It is great that the admin has been so consistent. It will make it very easy to work out a solution that allows the editor to continue doing what they've always done. The posts currently look like this:

nn April's Monthly Stats

Here's this month's top g green groups at the Org's community center. Again the number is the percentage of properly recycled materials compared to all materials ordered for their group.

■ Hanson's basketball league: 48

■ Mike's senior yoga collective: 62

Looks like our kids are doing the best job of helping us go green and stay there. Congratulations Millie's tots and Jennifer's graders!

Posted in Uncategorized 1 Leave a comment 1 Edit

You let the admin know as long as he/she continues to consistently format the posts in this way, you can write up a jQuery script that will draw the chart for them. They almost don't believe you, and are happy to have you proceed.

To get started, we'll need to first make sure we're targeting the correct posts for Monthly Stats only. We'll do this by setting up a jQuery selector like so:

jQuery('

.post h2:contains(Monthly Stats)')

.siblings('.entry-content')

.children('ul:first')

As we can see, this little "test" selection grabs all h2 tags which are inside .posts that only contain the text "Monthly Stats". We then move along the DOM and target the .entry-content div and then the first ul inside that. We can see the previous code is properly targeting what we want in these posts by changing the background color, as shown in the next screenshot:

itn April's Monthly ^tats ap* .

Here's this month's top 5 green groups at the Org's community center. Again the number is the percentage of properly recycled materials compared, to all materials ordered for their group.

• Hanson's basketball league: 48

■ Mike's senior yoga collective: 62

Loolcs like our kids are doing the best job of helping us go green and stay there. Congratulations Millie's tots and Jennifer's graders!

Now that we can target the specific posts we want, without changing the theme's output or making our client do any work, let's get to work on the rest of the graph!

First up, because we'll be loading a background image, and those just load a lot nicer from a theme's stylesheet (it's easier to target the images), let's use Inkscape again to help us create a basic background about 450 pixels wide that shows the progression from "Just getting started" to "Yes!", like so:

Let's export a PNG of that graphic and add it to the image directory of our client's theme. Then, using jQuery, let's dynamically add a class to all our targeted ul:

jQuery('.post h2:contains(Monthly Stats)')

.siblings('.entry-content,).children(,ul').addClass('greenStats');

We can now go into the client's theme stylesheet, and just as we did for the sticky alert posts, create custom CSS rules for our new class. Open up the theme's style.css stylesheet and add these rules at the end:

.entry-content .greenStats{ margin: 0;

background:url(images/greenBackground.png) no-repeat; border: 1px solid #006633; padding: 4 0px 2 0px 5px 2 0px;

.entry-content .greenStats li:before{content:none;} .entry-content .greenStats li{padding-left: 10px; margin: 0}

The first rule adds our new greenBackground.png chart image and sets some basic properties so that the list items can start accommodating our upcoming jQuery additions. The next two rules after that fix specific .entry-content li issues that the client's theme (in this case, the default theme) places on every li element inside an .entry-content div. We don't want the "little squares" before our chart items, and we want the padding on each li moved in about lOpx more. Again, we only want to affect the .entry-content li items if jQuery has added our .greenStats class so we're sure to add that class name into the CSS rule.

Now, we're ready for some serious jQuery magic. I hope you've been getting really comfortable working with selectors and traversing the DOM until now. We're going to have to put a fair amount of that knowledge to work to accomplish the next few tasks.

We want to place an ,each() function item on our targeted li and begin manipulating the content inside of them.

We'll start by setting up this jQuery statement:

jQuery('.post h2:contains(Monthly Stats)')

.siblings('.entry-content,).children(,ul,).children(,li') .each(function(){

//code here

Next, inside our ,each() function, we'll place code that start's manipulating the HTML and text inside each li object. We want to look for the colon ":" and use that as a point to wrap a div around the number that comes after it. After that, we'll look for the ending </li> tag and use that as a point to close our div that we started. We'll accomplish this by using the .text() and .replace() functions like so:

var string1 =

jQuery(this).text().replace(': ',':<div class="nVal">"); var string2 = string1.replace(,</li>,,,</div></li>1);

//place back into the li element as html markup and text: jQuery(this).html(string2);

That previous code snippet now gives us custom div with the class .nVal that we can start working with. The .nVal divs are ultimately going to be the "bars" in our green stats graph! Underneath the previous code, we'll continue to flesh-out our .each() function with the following code, again inside the .each() function:

//set the default css values of each nVal div:

jQuery(this).children('.nVal').css({width: '0', padding: '10px 0 10px 20px', fontSize: '130%', color: '#ffffff', marginBottom: '5px'});

//retrieve the number text from inside the nVal div:

//animate the nVal divs with the nVar values:

jQuery(this).children('.nVal').delay(600)

.animate({backgroundColor: '#006600', width: nVar*(3.8)}, 2000);

In the previous code snippet, note that I used the .delay() function. That function is optional if you're not using jQuery 1.4.2 or a higher library. I just think a good half second or so pause to make sure that users notice the animation is helpful.

We again used the .text() function to pull the text from inside the .nVal divs and use it in a mathematical equation to calculate the width of the divs with the .animate() function. We multiply nVar by 3.8 because within our chart design, a div width of about 380 pixels wide would be the equivalent of 100 percent. If your chart has different dimensions, you'd change those accordingly to have the chart bars extend out properly.

The result looks great! Here's our chart animation as it starts off:

tCTl April's Monthly Stats

Apr J

Here's this month's top 5 green groups at the Org's community center. Again the number is the percentage of properly recycled materials compared to all materials ordered for their group.

Getting Started... Almost There!.

■ Hanson's basketball league:

■ Millie's tots:

Keep It Up!

Yes!!!!

■ Jennifer's 4th & 5th graders:

■ Mike's senior yoga collective

Looks like our kids are doing the best job of helping us go green and stay there. Congratulations Millie's tots and Jennifer's graders!

And here it is at its completion, a fun visually clear display of the organization's shining greensters:

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment