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