Categories
Code Uncategorized

Flot – sexy graphs created in JavaScript

I recently had the opportunity to speak at the DC jQuery User Group during an entire meetup dedicated to charts and graphs. Russel Heimlich presented on Google Charts and Chris Bannon presented on Wijmo while I had the honor to present on Flot.

When AddThis switched to Flot, I had a chance to build some really cool charts. This was my opportunity to get some more developers interested in Flot. You can check out my slides and my Sample Code. If you’re looking for more information, check out Flot on Github or the old Google Code site.

Categories
Code Uncategorized

jQuery fix for tables lacking a thead

Every web developer that’s ever had to use jQuery knows just how much time it can save, and just how quickly it can fix a lot of problems. I recently had a case where I wanted to implement the jQuery Tablesorter plugin into a site that had a badly constructed table that I couldn’t change its construction. Tablesorter requires a table to be setup similar to:

[html]
<table id="tablesorter">
<thead>
<tr>
<th>name</th>
<th>something</th>
<th>something else</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>red</td>
<td>blue</td>
</tr>

</tbody>
</table>[/html]

The table I was working with lacked a thead and instead used the first tr as the head. It also added some styling classes for zebra striping that I wanted to get rid of so that tablesorter could add its zebra striping. Using jQuery, I was able to fix this up in just a few short lines:

[javascript]
$(document).ready(function()
{
$(‘table.example’).prepend(
$(‘<thead></thead>’).append($(‘.example tr:first’).remove())
);
$(‘table.example > tbody > tr’).removeClass(‘odd’);
$(‘table.example > tbody > tr’).removeClass(‘xx’);
}
);
[/javascript]

Line 1 starts jQuery. Line 2 selects our table and tells it to we are going to add something to the beginning of it. Line 3 takes the first tr, adds it to a new thead and removes it from the body. Lines 5 and 6 then remove the classes we aren’t going to use.

If you want to see this fix in action, take a look at a live demo. I hope this fix helps you out if you ever need to a jquery fix for a table with no thead. Let me know if you use it.