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_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 ;)
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
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>