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.
OptionDefaultDescription
'filtered' * Select which rows to include in the chart.

This option allows you to select which rows to include in the chart data:
  • 'a' - Include all rows, even if the table has been filtered or partially hidden by the pager.
  • 'v' - Include only visible rows, whether they are hidden by the pager or filter.
  • 'f' - Include only filtered rows, even if the pager is only showing a select few rows.
* Only the first letter is required, but the option will accept the full word (e.g. 'filtered' instead of 'f')
false Use the columnSelector widget in place of the chart_ignoreColumns option.

Set this option to true if using the columnSelector widget.

If using a custom column selector, then set this option to false and use the custom selector to update the chart_ignoreColumns option dynamically.
[ ] Array of zero-based column indexes of columns to ignore.

This option is used when the chart_useSelector option is false or 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.
[ ] 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.
{ 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 formatFloat function, 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.
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.
[ [ 0,0 ] ] Sort a specific column of data using the same format as tablesorter's sortList option; 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 the chart_labelCol to keep the axis ordered properly; but that is up to you ;)

  • column - zero-based index of the column to sort.
  • direction - sort direction; 0 indicates an ascending sort, and 1 indicates a descending sort is to be used.
* Note * Anything other than 1 as the sort direction will set an ascending sort.
'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
2004$ 1,000$ 400$ 600
2005$ 1,170$ 460$ 710
2006$ 660$ 1,120($ 460)
2007$ 1,030$ 540$ 490

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.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>

Javascript


	


	
CSS

	

		

	


	
HTML