Notes
- This widget will only work in tablesorter version 2.16+ and jQuery version 1.7+.
- It only provides data for charts.
- Currently it provides data for the following chart libraries: More details are available within the named "Setup" sections below.
Options
				TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
			
			| Option | Default | Description | 
|---|---|---|
| chart_incRows | 'filtered' * | Select which rows to include in the chart. 
								
								This option allows you to select which rows to include in the chart data:
								 
 | 
| chart_useSelector | false | Use the columnSelector widget in place of the chart_ignoreColumnsoption.
								
								Set this option to  trueif using the columnSelector widget.
								
								If using a custom column selector, then set this option tofalseand use the custom selector to update thechart_ignoreColumnsoption dynamically. | 
| chart_ignoreColumns | [ ] | Array of zero-based column indexes of columns to ignore. 
								
								This option is used when the  chart_useSelectoroption isfalseor if the columnSelector is set to "auto" mode.
								
								Update this option dynamically, if using a custom method to hide/indicate which columns are to be ignored when gathering data for the chart. | 
| chart_parsed | [ ] | Array of zero-based column indexes of columns that must used parsed data for charting. 
								
								Parsed data is gathered from the table cache, which is parsed the designated parser for that column.
								
								This option can be updated dynamically.
							 | 
| chart_layout | { 0: 'string' } | Object containing the format needed by the chart for each column. 
								
								By default, all columns will have their values converted to numbers. Prior to sending the value to tablesorter's  formatFloatfunction, the value will have all non-digit characters stripped out.
								
								Set the zero-based column index of the desired column to's'(only the first letter is needed) to pass the cell value to the chart as a string.
								
								This option can be updated dynamically. | 
| chart_labelCol | 0 | Set a zero-based column index for the column to be used as a chart label. 
							
							The chart label (independent variable) is usually the first array value in each nested array (at least for Google charts). In this demo, it is the Year.
							 | 
| chart_sort | [ [ 0,0 ] ] | Sort a specific column of data using the same format as tablesorter's sortListoption; but for a single column.
							
							Set this value to be an array contained within an array using the following format:  [[ column, direction ]]* Note * It would be best to sort the same column as thechart_labelColto keep the axis ordered properly; but that is up to you ;)
 1as the sort direction will set an ascending sort. | 
| chart_event | 'chartData' | The chart data will be updated when this event is triggered on the table. 
							
							Trigger a chart data update, then get the data as follows:
							 var $table = $('table').trigger('chartData'),
	data = $table[0].config.chart.data;
chartData( data ); // custom function to chart the data | 
Setup - Google Charts
			The data used by Google charts is an array of arrays in this format:
			
		[ [ "Year", "Sales", "Expenses" ], [ "2004", 1000, 400 ], [ "2005", 1170, 460 ], [ "2006", 660, 1120 ], [ "2007", 1030, 540 ] ]Access the data as follows:
var $table = $('table').trigger('chartData'),
	options = { /* set up options here */ },
	rawdata = $table[0].config.chart.data,
	data = google.visualization.arrayToDataTable( rawdata ),
	// bar chart example
	chart = new google.visualization.BarChart( $('#chart')[0] );
chart.draw(data, options);
		Setup - Highcharts
			The data used by Highcharts is an array of objects in this format:
			
		// categories
[ '2004', '2005', '2006', '2007' ]
// series
[{
	name: 'Sales',
	data: [ 1000, 1170, 660, 1030 ]
}, {
	name: 'Expenses',
	data: [ 400, 460, 1120, 540 ]
}]
			Access the data as follows:
			var $table = $('table').trigger('chartData');
$('#chart').highcharts({
	chart: { type: 'column' },
	xAxis: { categories: $table[0].config.chart.categories },
	series: $table[0].config.chart.series
});
		Setup - FusionCharts
			The data used by FusionCharts is an array of objects in this format:
			
	// category
[
	{"label": "2004"},
	{"label": "2005"},
	{"label": "2006"},
	{"label": "2007"}
]
// dataset
[{
	"seriesname": "Sales",
	"data": [
		{"value": "1000"},
		{"value": "1170"},
		{"value": "660"},
		{"value": "1030"}
	]
},{
	"seriesname": "Expenses",
	"data": [
		{"value": "400"},
		{"value": "600"},
		{"value": "1120"},
		{"value": "540"}
	]
}]
			Access the data as follows:
var $table = $('table');
$table.trigger('chartData');
FusionCharts.ready(function () {
	var analysisChart = new FusionCharts({
		dataFormat: 'json',
		dataSource: {
			"chart": {
				// ...
			},
			"categories": [{
				"category": $table[0].config.chart.category
			}],
			"dataset": $table[0].config.chart.dataset,
		},
		// other options
	}).render();
});
		Google Charts Demo
| Year | Sales | Expenses | Profit | 
|---|---|---|---|
| 2000 | $ 1,420 | $ 470 | $ 330 | 
| 2001 | $ 1,070 | $ 420 | $ 190 | 
| 2002 | $ 1,010 | $ 270 | $ 270 | 
| 2003 | $ 1,220 | $ 430 | $ 460 | 
| 2004 | $ 1,000 | $ 400 | $ 600 | 
| 2005 | $ 1,170 | $ 460 | $ 710 | 
| 2006 | $ 660 | $ 1,120 | ($ 460) | 
| 2007 | $ 1,030 | $ 540 | $ 490 | 
| 2008 | $ 2,150 | $ 240 | $ 410 | 
| 2009 | $ 230 | $ 660 | $ 110 | 
| 2010 | $ 1,110 | $ 390 | $ 520 | 
| 2011 | $ 733 | $ 110 | $ 210 | 
| 2012 | $ 870 | $ 300 | $ 190 | 
| 2013 | $ 1,320 | $ 490 | $ 290 | 
| 2014 | $ 950 | $ 210 | $ 140 | 
Page Header
<!-- Google charts --> <script src="//www.google.com/jsapi"></script> <!-- jQuery --> <script src="js/jquery-latest.min.js"></script> <!-- Demo stuff --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- buttons --> <link rel="stylesheet" href="css/bootstrap-v3.min.css"> <script src="js/bootstrap.min.js"></script> <!-- Tablesorter: required --> <link rel="stylesheet" href="../css/theme.blue.css"> <script src="../js/jquery.tablesorter.js"></script> <script src="../js/widgets/widget-chart.js"></script> <!-- Tablesorter: optional --> <script src="../js/jquery.tablesorter.widgets.js"></script> <script src="../js/widgets/widget-cssStickyHeaders.js"></script> <script src="../js/widgets/widget-columnSelector.js"></script> <script src="../js/widgets/widget-pager.js"></script>