In a footnote to my post a while ago on SafeYAML¹, I established a goal of writing more about my many open source projects, which I have a bad habit of not telling anyone about—sometimes even long after they're finished!

So today I want to write about a pretty good one that's relatively polished and full-featured. It's called HighTables, and it's a JavaScript library that makes adding charts to existing sites with HTML tables extremely easy.

Here, I'll give you an example (note: this is probably not going to display properly for those of you on RSS readers; visit the website to see what I'm trying to show you!):

<table class="render-to-bar-chart">
  <tr>
    <th>Method of rendering a chart</th>
    <th>How easy it is (scale from 1 to 10)</th>
  </tr>
  <tr>
    <td>Using Highcharts directly</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Using HighTables</td>
    <td>10</td>
  </tr>
</table>

And the result:

Pretty cool, right?

For what it's worth, HighTables itself isn't all that complicated. It leverages the power of two existing libraries, Highcharts and jQuery. If you don't know about Highcharts, it's a great library that lets you render all kinds of charts (line, area, bar, pie, etc.) in JavaScript. And if you don't know about jQuery, and you're a JavaScript developer, you should probably blow the dust off your keyboard and ask any JS-related question on the internet to learn more about it.

My problem with Highcharts in the past was that it has a behemoth API. Rendering a chart was never a simple matter of calling pieChart(); instead, any chart-creation logic requires a whole ton of options that an average person is very unlikely to remember from one use to the next. And so I always found myself returning to the Highcharts website, perusing documentation, and following examples to ever get a chart to display on sites I've worked on.

Of course, like any good developer, I eventually would get around to writing reusable methods with easier-to-remember interfaces and use those to render my charts. But at some point I noticed a pattern: mostly I was putting charts where tables already were. The point of the chart was to display the data in a visual form, to make it a bit easier to parse for a human. The work of translating the data in the table to JavaScript code to render the chart was tedious, but easily repeatable.

And from there came the realization that I could (and probably should) just automate every bit of the process, and write a library to always render a chart from a table—provided that table had some class (like render-to-line-chart) associated with it. So that's exactly how HighTables works: you add one class to your table, include the library in your page, and charts display automatically. (The charts above are rendered from a hidden table, by the way, in case you were confused!)

So, by all means, try out HighTables and let me know what you think! I've already used it a good deal myself, and I can honestly say it's been really useful to me. But the more use it gets, the more useful it should become as bugs are fixed, features are introduced, yada yada. At least that's the hope.

Did you enjoy reading this?