Blog

Or search support forum

What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

On Shelves

Books by Josh Clark

Tapworthy: Designing Great iPhone Apps

Best iPhone Apps: The Guide for Discriminating Downloaders

iWork ’09: The Mising Manual

Moxiemail

Enter your e-mail to receive occasional updates:

Turn Your Tables into Spiffy Charts

Posted Feb 16, 2008

In December, Google unveiled a nifty way to generate slick chart graphics. The Google Charts API lets you fetch custom images from Google by using image URLs containing your chart data.

For example, requesting the image at this URL:
http://chart.apis.google.com/chart?cht=p3&chd=t:70,30&chs=500x200&chl=Hello|World

...returns this image:

An example 3D pie chart

Cool huh? Cram your data into a URL and you get a png image back. No muss, no fuss.

Well, okay... there is in fact some muss and just a touch of fuss. Building these URLs by hand is a clunky process. Also complicating matters is that you need to encode your data values into one of three systems to help keep URLs short. As a result, a variety of tools have sprung up to provide friendly interfaces for generating these chart URLs.

My personal favorite has been the table-to-chart script by Christian Heilmann, which replaces data tables in your HTML pages with 3D pie charts like the one above. This clever approach makes creating chart graphics as simple as creating a two-column HTML table. Even better, because the data lives in the page as a table, the info remains accessible to vision-impaired users and search engines, two important audiences for whom chart images offer little informational value.

Introducing bm-table2chart.js

I've adapted and expanded Christian's script for easy use with Big Medium. I also added support for bar charts, line charts and two-dimensional pie charts.

After you install the script, all you have to do is add a two-column table with class "tochart" to your Big Medium page. In the table, each row represents one value: the first column contains the value's text label, and the second column contains the numeric value to chart:

<table class="tochart size500x200" width="300" border="1"
       cellpadding="3" align="center"
       summary="Josh's most-listened artists at Last.fm">
  <tr>
    <td>Wilco</td> <td>1360</td>
  </tr>
  <tr>
    <td>Beastie Boys</td> <td>1001</td>
  </tr>
  <tr>
    <td>Fatboy Slim</td> <td>925</td>
  </tr>
  <tr>
    <td>Bob Dylan</td> <td>802</td>
  </tr>
  <tr>
    <td>Herman Dune</td> <td>636</td>
  </tr>
  <tr>
    <td>Calexico</td> <td>509</td>
  </tr>
</table>

Normally, this HTML markup would look like this:

Wilco 1360
Beastie Boys 1001
Fatboy Slim 925
Bob Dylan 802
Herman Dune 636
Calexico 509

But with the bm-table2chart.js script installed, the table is replaced by this 3D pie chart:

Wilco 1360
Beastie Boys 1001
Fatboy Slim 925
Bob Dylan 802
Herman Dune 636
Calexico 509

The script builds 3D pie charts by default, but by adding "piechart" to the table's class attribute, we get a traditional two-dimensional pie chart:

Wilco 1360
Beastie Boys 1001
Fatboy Slim 925
Bob Dylan 802
Herman Dune 636
Calexico 509

...or use "barchart" instead:

Wilco 1360
Beastie Boys 1001
Fatboy Slim 925
Bob Dylan 802
Herman Dune 636
Calexico 509

...or "linechart":

Wilco 1360
Beastie Boys 1001
Fatboy Slim 925
Bob Dylan 802
Herman Dune 636
Calexico 509

Installation

These instructions describe how to use the script with the Big Medium content management system. (Want to use it outside of Big Medium?)

bm-table2chart (2 KB)
Download the zip file.
  1. Download the zip file.

  2. Unzip the file to get bm-table2chart.js.

  3. Upload bm-table2chart.js to your server. For example, to this location:
    http://www.example.com/scripts/bm-table2chart.js

  4. In Big Medium, select "Settings>HTML Preferences," and go to the "Document and Page Header" screen.

  5. In the "Additional HTML to include in the page header" field, add this script tag, updating the URL to reflect the location of bm-table2chart.js on your server:

    <script src="http://www.example.com/scripts/bm-table2chart.js"
    type="text/javascript"></script>
    
  6. Save the settings, and follow the link on the next screen to rebuild all pages.

  7. Add the following styles to your theme style sheet ("Layout>Edit Theme Style Sheet"):

    table.hidden {
        position:absolute;
        height:1px;
        width:1px;
        overflow:hidden;
        top:0;
        left:-99999em;
    }
    div.chartfromtable{
        margin:1em auto;
        text-align:center;
    }
    div.chartfromtable img {
        border:1px solid #ccc;  
        padding:5px;
    }
    

Usage

Add your data table(s) to a page

Any table with class "tochart" will be converted to a Google chart.

If you're using Big Medium's rich-text editor, you can add a table by clicking the table icon in the tool bar. To add the class, you'll need to edit the source code; click the "source" button in the tool bar, and find the <table> tag to edit, adding class="tochart" to the table.

If you're entering your content in the Markdown or Rich Text tab, just enter the HTML for your table, including the "tochart" class in the opening <table> tag.

Chart type

By default, tables are converted to 3D pie charts. To customize the chart type, add any of the following to the table's class:

  • 3dpiechart
  • piechart
  • barchart
  • linechart

For example: <table class="tochart piechart">

Chart size

By default, charts are 350x150 pixels. You can specify another size by adding a "size" class to the table. For example: <table class="tochart barchart size400x300">

That "size400x300" class generates a chart 400 pixels wide and 200 pixels high.

Google recommends that pie charts be at least twice as wide as they are tall to avoid clipping the text labels. For 3D pie charts, the width should be at least 2.5 times the height. For other charts, you may find that you need to tweak the size depending on the length of your text labels.

The maximum height or width of a chart is 1000 pixels, and the maximum area for a chart is 300,000 pixels. For example, a few maximum sizes include: 1000x300, 300x1000, 600x500, 500x600, 800x375, and 375x800.

Chart color

By default, charts are green (#339933). You can specify another hexadecimal color by adding a "color" class o the table. For example: <table class="tochart colorCC3333">

That "colorCC3333" class generates a chart with a #cc3333 (red) color.

Keeping the table

By default, the data table is replaced by the chart. If you prefer to keep the chart visible, add a "nohide" class to the table. For example: <table class="tochart nohide">

With that "nohide" class, the table will continue to be displayed, immediately below the chart graphic.

Using bm-table2chart.js outside of Big Medium

You can use this script for pages that are not managed by Big Medium, but a couple of minor changes are required:

  1. In the bm2-table2chart.js file, change the first line of code:

    BM.onDOM.addEvent(function(){
    

    to...

    (function(){
    
  2. Change the last line of code:

    });
    

    to...

    })();
    
  3. The code requires the prototype.js library. Download it from the Prototype site, and place the file to your server.

  4. Add the following to the page to include the script, as the very last element just before the closing </body> tag (update the URL to point to the prototype.js and bm2-table2chart.js files on your server).

    <script src="prototype.js" type="text/javascript"></script>
    <script src="bm2-table2chart.js" type="text/javascript"></script>
    
  5. Add the following to your CSS styles:

    table.hidden {
        position:absolute;
        height:1px;
        width:1px;
        overflow:hidden;
        top:0;
        left:-99999em;
    }       
    div.chartfromtable{
        margin:1em auto;
        text-align:center;
    }
    div.chartfromtable img {
        border:1px solid #ccc;  
        padding:5px;
    }
    

License

bm-table2chart.js is distributed under the Creative Commons Attribution 3.0 license. You're free to use it, distribute it, and adapt it provided you maintain the author credits in the bm-table2chart.js file.

Tags: , , , , , ,

Want more? Recent blog entries...

Comments

1 comment(s) on this page. Add your own comment below.

Apr 9, 2008 9:52am [ 1 ]

We did a really simple loan repayment calculator using the API. It's nothing amazing but it should be of use to people.

Add a Comment

Don't be shy.

(Use Markdown for formatting.)

This question helps prevent spam:

Download Big Medium
Try it free for 30 days, or buy to unlock.

Listen Up

“I listen to what Josh Clark has to say.”
—Matt Legend Gemmell, developer, Instinctive Code

“Tapworthy is a great iPhone development book.”
—Joe Hewitt, creator of the Facebook iPhone app

“I snagged a copy of Josh Clark’s Tapworthy. Mmmm... that’s good interface.
—Boon Sheridan