Visualizer HTML table based charting with jQuery

by Amit Vishwakarma

HTML

<script src="http://mindmeldtools.com/cssjs/visualize.jQuery.js"></script>
<script src="http://mindmeldtools.com/cssjs/excanvas.js"></script>
<link rel="stylesheet" href="http://mindmeldtools.com/cssjs/visualize.css">
<link rel="stylesheet" href="http://mindmeldtools.com/cssjs/visualize-dark.css">
<link rel="stylesheet" href="http://dwpe.googlecode.com/svn/trunk/charting/css/basic.css">
<table > 
    <caption>2011 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>  
          <tr> 
            <th scope="row">Kate</th> 
              <td> <a href="#"> 40 </a> </td> 
            <td>80</td> 
            <td>90</td> 
            <td>25</td> 
            <td>15</td> 
            <td>119</td> 
        </tr>    
    </tbody> 
</table>

CSS

/*  SCROLL DOWN TO SEE GRAPHICS  */
/*  CHANGE HTML DATA ON TOP LEFT TO CHANGE  GRAPHICS  */

JavaScript

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



/*

type: string. Accepts 'bar', 'area', 'pie', 'line'. Default: 'bar'.
width: number. Width of chart. Defaults to table width
height: number. Height of chart. Defaults to table height
appendTitle: boolean. Add title to chart. Default: true.
title: string. Title for chart. Defaults to text of table's Caption element.
appendKey: boolean. Add the color key to the chart. Default: true.
colors: array. Array items are hex values, used in order of appearance. Default: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']

textColors: array. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].
parseDirection: string. Direction to parse the table data. Accepts 'x' and 'y'. Default: 'x'.
pieMargin: number. Space around outer circle of Pie chart. Default: 20.
pieLabelPos: string. Position of text labels in Pie chart. Accepts 'inside' and 'outside'. Default: 'inside'.

lineWeight: number. Stroke weight for lines in line and area charts. Default: 4.
barGroupMargin: number. Space around each group of bars in a bar chart. Default: 10.
barMargin: number. Creates space around bars in bar chart (added to both sides of each bar). 
Default: 1

http://irae.pro.br/code/jquery.visualize/interactive.html

*/