Fun with Charts via jQuery Visualize

by deanpeters

HTML

<h2>Fun with Charts via jQuery Visualize</h2>
<table > 
    <caption>2012 Employee Sales by Department</caption> 
    <thead> 
        <tr> 
            <td></td> 
            <th scope="col">food</th> 
            <th scope="col">auto</th> 
            <th scope="col">household</th> 
            <th scope="col">furniture</th> 
            <th scope="col">kitchen</th> 
            <th scope="col">bath</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <th scope="row">Mary</th> 
            <td>190</td> 
            <td>160</td> 
            <td>40</td> 
            <td>120</td> 
            <td>130</td> 
            <td>70</td> 
        </tr> 
        <tr> 
            <th scope="row">Tom</th> 
            <td>3</td> 
            <td>40</td> 
            <td>30</td> 
            <td>45</td> 
            <td>35</td> 
            <td>49</td> 
        </tr> 
        <tr> 
            <th scope="row">Brad</th> 
            <td>10</td> 
            <td>100</td> 
            <td>10</td> 
            <td>85</td> 
            <td>25</td> 
            <td>79</td> 
        </tr> 
        <tr> 
            <th scope="row">Kate</th> 
            <td>40</td> 
            <td>80</td> 
            <td>90</td> 
            <td>25</td> 
            <td>15</td> 
            <td>119</td> 
        </tr>        
    </tbody> 
</table>   

<!-- here are all the required libraries ... chuh -->
<script type='text/javascript' src="http://mindmeldtools.com/cssjs/visualize.jQuery.js"></script>
<script type='text/javascript' src="http://mindmeldtools.com/cssjs/excanvas.js"></script>
<link rel="stylesheet" type="text/css" href="http://mindmeldtools.com/cssjs/visualize.css">
<link rel="stylesheet" type="text/css" href="http://mindmeldtools.com/cssjs/visualize-dark.css">
<link rel="stylesheet" type="text/css" href="http://dwpe.googlecode.com/svn/trunk/charting/css/basic.css">

<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount',...

JavaScript

// alert("to-do: dang'd CSS is allbroken & fouled up\n\nneed to come back in on this tacks and re-do CSS!");

$('table').visualize({type: 'pie'});
$('table').visualize({type: 'line'});
$('table').visualize({type: 'bar', parseDirection: 'y'});
$('table').visualize({type: 'area'});