# tablesorter

## Chart Widget (beta)

### Flexible client-side table sorting

Back to documentation

### 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:
  - Google charts
  - Highcharts
  - FusionCharts
  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: `'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')
chart_useSelector | 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.
chart_ignoreColumns | [ ] | 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.
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 `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.
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 `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.
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

Column
Chart
Filtered Visible All

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