703 lines
23 KiB
HTML
703 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery tablesorter 2.0 - Chart Widget</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
<script src="js/jquery-ui.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
|
|
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link rel="stylesheet" href="css/prettify.css">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
<!-- Google charts -->
|
|
<script src="https://www.google.com/jsapi"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<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>
|
|
<script src="../js/widgets/widget-chart.js"></script>
|
|
|
|
<style>
|
|
h1 { font-size: 28px; }
|
|
/* override jQuery UI overriding Bootstrap */
|
|
.accordion .ui-widget-content a {
|
|
color: #337ab7;
|
|
}
|
|
/* .spacer in docs css is set to height:800px for stickyHeader demo */
|
|
#pager .spacer { height: auto; }
|
|
.wrapper { padding: 5px; }
|
|
</style>
|
|
|
|
<style id="css">#pager div {
|
|
display: inline-block;
|
|
}
|
|
|
|
#pager-container .spacer {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#pager-container,
|
|
#chart-container {
|
|
text-align: center;
|
|
}
|
|
|
|
#chart-container > div {
|
|
display: inline-block;
|
|
}
|
|
|
|
#chartbar {
|
|
text-align: center;
|
|
}
|
|
|
|
#chartbar i.clickable {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
i.clickable {
|
|
cursor: pointer;
|
|
color: #999;
|
|
}
|
|
|
|
i.clickable.disabled,
|
|
i.clickable.disabled:hover {
|
|
cursor: not-allowed;
|
|
color: #ccc;
|
|
}
|
|
|
|
i.active.clickable,
|
|
i.clickable:hover {
|
|
color: #000;
|
|
}
|
|
|
|
/*** custom css only popup ***/
|
|
.columnSelector, .hidden, #chart-container {
|
|
display: none;
|
|
}
|
|
#colSelect:checked + label {
|
|
background: #5797d7;
|
|
border-color: #555;
|
|
}
|
|
#colSelect:checked ~ #columnSelector {
|
|
display: block;
|
|
}
|
|
#chartSelect:checked + label {
|
|
background: #5797d7;
|
|
border-color: #555;
|
|
}
|
|
.columnSelector {
|
|
width: 120px;
|
|
position: absolute;
|
|
margin-top: 5px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
border: #ccc 1px solid;
|
|
border-radius: 5px;
|
|
}
|
|
.columnSelector label {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
.columnSelector label:nth-child(1) {
|
|
border-bottom: #99bfe6 solid 1px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.columnSelector input {
|
|
margin-right: 5px;
|
|
}
|
|
.columnSelector .disabled {
|
|
color: #ddd;
|
|
}</style>
|
|
</head>
|
|
<body>
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Chart Widget (beta)</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
<p></p>
|
|
<br>
|
|
<div id="root" class="accordion">
|
|
|
|
<h3 id="notes"><a href="#">Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>This widget will <strong>only work</strong> in tablesorter version 2.16+ and jQuery version 1.7+.</li>
|
|
<li>It only provides data for charts.</li>
|
|
<li>Currently it provides data for the following chart libraries:
|
|
<ul>
|
|
<li><a href="https://developers.google.com/chart/">Google charts</a></li>
|
|
<li><a href="http://www.highcharts.com/">Highcharts</a></li>
|
|
<li><a href="http://www.fusioncharts.com/">FusionCharts</a></li>
|
|
</ul>
|
|
More details are available within the named "Setup" sections below.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3 id="options"><a href="#">Options</a></h3>
|
|
<div>
|
|
<div>
|
|
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</div>
|
|
|
|
<table class="options tablesorter-blue">
|
|
<thead>
|
|
<tr><th class="option">Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="chart-inc-rows">
|
|
<td><a href="#" class="permalink">chart_incRows</a></td>
|
|
<td>'filtered' <span class="results">*</span></td>
|
|
<td>Select which rows to include in the chart.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
This option allows you to select which rows to include in the chart data:
|
|
<ul>
|
|
<li><code>'a'</code> - Include <em>all</em> rows, even if the table has been filtered or partially hidden by the pager.</li>
|
|
<li><code>'v'</code> - Include only <em>visible</em> rows, whether they are hidden by the pager or filter.</li>
|
|
<li><code>'f'</code> - Include only <em>filtered</em> rows, even if the pager is only showing a select few rows.</li>
|
|
</ul>
|
|
<span class="results">*</span> Only the first letter is required, but the option will accept the full word (e.g. 'filtered' instead of 'f')
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-use-selector">
|
|
<td><a href="#" class="permalink">chart_useSelector</a></td>
|
|
<td>false</td>
|
|
<td>Use the columnSelector widget in place of the <code>chart_ignoreColumns</code> option.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
Set this option to <code>true</code> if using the columnSelector widget.
|
|
<p></p>
|
|
If using a custom column selector, then set this option to <code>false</code> and use the custom selector to update the <code>chart_ignoreColumns</code> option dynamically.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-ignore-columns">
|
|
<td><a href="#" class="permalink">chart_ignoreColumns</a></td>
|
|
<td>[ ]</td>
|
|
<td>Array of zero-based column indexes of columns to ignore.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
This option is used when the <code>chart_useSelector</code> option is <code>false</code> or if the columnSelector is set to "auto" mode.
|
|
<p></p>
|
|
Update this option dynamically, if using a custom method to hide/indicate which columns are to be ignored when gathering data for the chart.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-parsed">
|
|
<td><a href="#" class="permalink">chart_parsed</a></td>
|
|
<td>[ ]</td>
|
|
<td>Array of zero-based column indexes of columns that must used parsed data for charting.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
Parsed data is gathered from the table cache, which is parsed the designated parser for that column.
|
|
<p></p>
|
|
This option can be updated dynamically.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-layout">
|
|
<td><a href="#" class="permalink">chart_layout</a></td>
|
|
<td>{ 0: 'string' }</td>
|
|
<td>Object containing the format needed by the chart for each column.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
By default, all columns will have their values converted to numbers. Prior to sending the value to tablesorter's <a href="index.html#function-formatfloat"><code>formatFloat</code></a> function, the value will have all non-digit characters stripped out.
|
|
<p></p>
|
|
Set the zero-based column index of the desired column to <code>'s'</code> (only the first letter is needed) to pass the cell value to the chart as a string.
|
|
<p></p>
|
|
This option can be updated dynamically.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-label-col">
|
|
<td><a href="#" class="permalink">chart_labelCol</a></td>
|
|
<td>0</td>
|
|
<td>Set a zero-based column index for the column to be used as a chart label.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
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.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-sort">
|
|
<td><a href="#" class="permalink">chart_sort</a></td>
|
|
<td>[ [ 0,0 ] ]</td>
|
|
<td>Sort a specific column of data using the same format as tablesorter's <code>sortList</code> option; but for a single column.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
Set this value to be an array contained within an array using the following format: <code>[[ column, direction ]]</code>
|
|
<p></p>
|
|
<span class="label label-info">* Note *</span> It would be best to sort the same column as the <code>chart_labelCol</code> to keep the axis ordered properly; but that is up to you ;)
|
|
<p></p>
|
|
<ul>
|
|
<li><code>column</code> - zero-based index of the column to sort.</li>
|
|
<li><code>direction</code> - sort direction; <code>0</code> indicates an ascending sort, and <code>1</code> indicates a descending sort is to be used.</li>
|
|
</ul>
|
|
<span class="label warning">* Note *</span> Anything other than <code>1</code> as the sort direction will set an ascending sort.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="chart-event">
|
|
<td><a href="#" class="permalink">chart_event</a></td>
|
|
<td>'chartData'</td>
|
|
<td>The chart data will be updated when this event is triggered on the table.
|
|
<div class="collapsible">
|
|
<p></p>
|
|
Trigger a chart data update, then get the data as follows:
|
|
<pre class="prettyprint lang-js">var $table = $('table').trigger('chartData'),
|
|
data = $table[0].config.chart.data;
|
|
chartData( data ); // custom function to chart the data</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3 id="google"><a href="#">Setup - Google Charts</a></h3>
|
|
<div>
|
|
The data used by Google charts is an array of arrays in this format:
|
|
<pre class="prettyprint lang-js">[
|
|
[ "Year", "Sales", "Expenses" ],
|
|
[ "2004", 1000, 400 ],
|
|
[ "2005", 1170, 460 ],
|
|
[ "2006", 660, 1120 ],
|
|
[ "2007", 1030, 540 ]
|
|
]</pre>
|
|
Access the data as follows:
|
|
<pre class="prettyprint lang-js">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);
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id="highcharts"><a href="#">Setup - Highcharts</a></h3>
|
|
<div>
|
|
The data used by Highcharts is an array of objects in this format:
|
|
<pre class="prettyprint lang-js">// categories
|
|
[ '2004', '2005', '2006', '2007' ]
|
|
|
|
// series
|
|
[{
|
|
name: 'Sales',
|
|
data: [ 1000, 1170, 660, 1030 ]
|
|
}, {
|
|
name: 'Expenses',
|
|
data: [ 400, 460, 1120, 540 ]
|
|
}]</pre>
|
|
Access the data as follows:
|
|
<pre class="prettyprint lang-js">var $table = $('table').trigger('chartData');
|
|
|
|
$('#chart').highcharts({
|
|
chart: { type: 'column' },
|
|
xAxis: { categories: $table[0].config.chart.categories },
|
|
series: $table[0].config.chart.series
|
|
});
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id="fusioncharts"><a href="#">Setup - FusionCharts</a></h3>
|
|
<div>
|
|
The data used by FusionCharts is an array of objects in this format:
|
|
<pre class="prettyprint lang-js">// 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"}
|
|
]
|
|
}]</pre>
|
|
Access the data as follows:
|
|
<pre class="prettyprint lang-js">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();
|
|
});</pre>
|
|
</div>
|
|
|
|
</div>
|
|
<p></p>
|
|
|
|
<h1>Google Charts Demo</h1>
|
|
<div id="demo"><div id="chart-container">
|
|
<div id="chart"></div>
|
|
<p></p>
|
|
<div id="chartbar">
|
|
<i class="fa fa-cube active clickable toolti" title="3D Pie Chart" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-pie-chart clickable" title="Pie Chart" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-line-chart clickable" title="Line Graph" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-area-chart clickable" title="Area Graph" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-bar-chart clickable" title="Vertical Bar Chart" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-tasks fa-rotate-90 clickable" title="Stacking Vertical Bar Chart" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-align-left clickable" title="Horizontal Bar Chart" data-toggle="tooltip" data-placement="top"></i>
|
|
<i class="fa fa-tasks fa-rotate-180 clickable" title="Stacking Horizontal Bar Chart" data-toggle="tooltip" data-placement="top"></i>
|
|
</div>
|
|
<p></p>
|
|
</div>
|
|
|
|
<!-- ColumnSelector -->
|
|
<label for="colSelect" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="top" title="Toggle visible columns">
|
|
<input id="colSelect" type="checkbox" class="hidden">
|
|
<i class="fa fa-table"></i> Column
|
|
<div id="columnSelector" class="columnSelector"></div>
|
|
</label>
|
|
<!-- Chart -->
|
|
<label for="chartSelect" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="top" title="Toggle chart visibility">
|
|
<input id="chartSelect" type="checkbox" class="hidden">
|
|
<i class="fa fa-pie-chart"></i> Chart
|
|
</label>
|
|
<!-- row selector -->
|
|
<span class="wrapper" data-toggle="tooltip" data-placement="top" title="Chart filtered, visible or all rows">
|
|
<div class="btn-group chart-filter-all" data-toggle="buttons">
|
|
<label class="btn btn-default btn-sm active">
|
|
<input type="radio" name="getrows" data-type="filter" checked="checked"> Filtered
|
|
</label>
|
|
<label class="btn btn-default btn-sm">
|
|
<input type="radio" name="getrows" data-type="visible"> Visible
|
|
</label>
|
|
<label class="btn btn-default btn-sm">
|
|
<input type="radio" name="getrows" data-type="all"> All
|
|
</label>
|
|
</div>
|
|
</span>
|
|
|
|
<table id="table" class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Year</th>
|
|
<th>Sales</th>
|
|
<th>Expenses</th>
|
|
<th>Profit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>2000</td><td>$ 1,420</td><td>$ 470</td><td>$ 330</td></tr>
|
|
<tr><td>2001</td><td>$ 1,070</td><td>$ 420</td><td>$ 190</td></tr>
|
|
<tr><td>2002</td><td>$ 1,010</td><td>$ 270</td><td>$ 270</td></tr>
|
|
<tr><td>2003</td><td>$ 1,220</td><td>$ 430</td><td>$ 460</td></tr>
|
|
<tr><td>2004</td><td>$ 1,000</td><td>$ 400</td><td>$ 600</td></tr>
|
|
<tr><td>2005</td><td>$ 1,170</td><td>$ 460</td><td>$ 710</td></tr>
|
|
<tr><td>2006</td><td>$ 660</td><td>$ 1,120</td><td>($ 460)</td></tr>
|
|
<tr><td>2007</td><td>$ 1,030</td><td>$ 540</td><td>$ 490</td></tr>
|
|
<tr><td>2008</td><td>$ 2,150</td><td>$ 240</td><td>$ 410</td></tr>
|
|
<tr><td>2009</td><td>$ 230</td><td>$ 660</td><td>$ 110</td></tr>
|
|
<tr><td>2010</td><td>$ 1,110</td><td>$ 390</td><td>$ 520</td></tr>
|
|
<tr><td>2011</td><td>$ 733</td><td>$ 110</td><td>$ 210</td></tr>
|
|
<tr><td>2012</td><td>$ 870</td><td>$ 300</td><td>$ 190</td></tr>
|
|
<tr><td>2013</td><td>$ 1,320</td><td>$ 490</td><td>$ 290</td></tr>
|
|
<tr><td>2014</td><td>$ 950</td><td>$ 210</td><td>$ 140</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- pager -->
|
|
<div id="pager-container">
|
|
<div id="pager">
|
|
<form>
|
|
<select class="pagesize" title="Select rows per page" data-toggle="tooltip" data-placement="left">
|
|
<option value="3">3</option>
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
</select>
|
|
<div class="spacer"><div class="separator"></div></div>
|
|
<i class="fa fa-step-backward first clickable" title="First page"></i>
|
|
<i class="fa fa-backward prev clickable" title="Previous page"></i>
|
|
<div class="spacer"><div class="separator"></div></div>
|
|
<span class="pagedisplay"></span>
|
|
<div class="spacer"><div class="separator"></div></div>
|
|
<i class="fa fa-forward next clickable" title="Next page"></i>
|
|
<i class="fa fa-step-forward last clickable" title="Last page"></i>
|
|
<div class="spacer"><div class="separator"></div></div>
|
|
<select class="gotoPage" title="Select page" data-toggle="tooltip" data-placement="right"></select>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1>Page Header</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><!-- 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></pre>
|
|
</div>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
<h1>CSS</h1>
|
|
<div id="css">
|
|
<pre class="prettyprint lang-css"></pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script id="js">google.load("visualization", "1.1", {
|
|
packages: ["bar", "corechart", "line"]
|
|
});
|
|
|
|
$(function() {
|
|
/* Initial settings */
|
|
var $table = $('#table'),
|
|
$chart = $('#chart'),
|
|
$bar = $('#chartbar'),
|
|
$rowType = $('[name=getrows]'),
|
|
$icons = $('#chart-container i'),
|
|
initType = 'pie', // graph types ('pie', 'pie3D', 'line', 'area', 'vbar', 'vstack', 'hbar' or 'hstack')
|
|
chartTitle = 'Company Performance',
|
|
axisTitle = 'Year',
|
|
width = 900,
|
|
height = 500,
|
|
// extra data processing
|
|
processor = function(data) {
|
|
// console.log(data);
|
|
return data;
|
|
},
|
|
|
|
// don't change anything below, unless you want to remove some types; modify styles and/or font-awesome icons
|
|
types = {
|
|
pie3D : { in3D: true, maxCol: 2, stack: false, type: 'pie', titleStyle: { color: '#333' }, icon: 'fa-cube' },
|
|
pie : { in3D: false, maxCol: 2, stack: false, type: 'pie', titleStyle: { color: '#333' }, icon: 'fa-pie-chart' },
|
|
line : { in3D: false, maxCol: 99,stack: false, type: 'line', titleStyle: { color: '#333' }, icon: 'fa-line-chart' },
|
|
area : { in3D: false, maxCol: 5, stack: false, type: 'area', titleStyle: { color: '#333' }, icon: 'fa-area-chart' },
|
|
vbar : { in3D: false, maxCol: 5, stack: false, type: 'vbar', titleStyle: { color: '#333' }, icon: 'fa-bar-chart' },
|
|
vstack : { in3D: false, maxCol: 5, stack: true, type: 'vbar', titleStyle: { color: '#333' }, icon: 'fa-tasks fa-rotate-90' },
|
|
hbar : { in3D: false, maxCol: 5, stack: false, type: 'hbar', titleStyle: { color: '#333' }, icon: 'fa-align-left' },
|
|
hstack : { in3D: false, maxCol: 5, stack: true, type: 'hbar', titleStyle: { color: '#333' }, icon: 'fa-tasks fa-rotate-180' }
|
|
},
|
|
/* internal variables */
|
|
settings = {
|
|
table : $table,
|
|
chart : $chart[0],
|
|
chartTitle : chartTitle,
|
|
axisTitle : axisTitle,
|
|
type : initType,
|
|
processor : processor
|
|
},
|
|
drawChart = function() {
|
|
if (!$table[0].config) { return; }
|
|
var options, chart, numofcols, data,
|
|
s = settings,
|
|
t = types[s.type],
|
|
obj = s.chart,
|
|
rawdata = $table[0].config.chart.data;
|
|
if ( $.isFunction( s.processor ) ) {
|
|
rawdata = s.processor( rawdata );
|
|
}
|
|
if ( rawdata.length < 2 ) {
|
|
return;
|
|
}
|
|
data = google.visualization.arrayToDataTable( rawdata );
|
|
|
|
numofcols = rawdata[1].length;
|
|
if (numofcols > t.maxCol) {
|
|
// default to line chart if too many columns selected
|
|
t = types['line'];
|
|
}
|
|
|
|
options = {
|
|
title: s.chartTitle,
|
|
chart: {
|
|
title: s.chartTitle
|
|
},
|
|
hAxis: {
|
|
title: s.axisTitle,
|
|
titleTextStyle: t.titleStyle
|
|
},
|
|
vAxis: {},
|
|
is3D: t.in3D,
|
|
isStacked: t.stack,
|
|
width: width,
|
|
height: height
|
|
};
|
|
|
|
if (t.type == 'vbar' && !t.stack) {
|
|
chart = new google.charts.Bar(obj);
|
|
} else if (t.type == 'vbar') {
|
|
chart = new google.visualization.ColumnChart(obj);
|
|
} else if (t.type == 'hbar') {
|
|
options.hAxis = {};
|
|
options.vAxis = {
|
|
title: s.axisTitle,
|
|
titleTextStyle: t.titleStyle,
|
|
minValue: 0
|
|
};
|
|
chart = new google.visualization.BarChart(obj);
|
|
} else if (t.type == 'area') {
|
|
chart = new google.visualization.AreaChart(obj);
|
|
} else if (t.type == 'line') {
|
|
chart = new google.charts.Line(obj);
|
|
} else {
|
|
chart = new google.visualization.PieChart(obj);
|
|
}
|
|
chart.draw(data, options);
|
|
};
|
|
|
|
$('#chartSelect').change(function() {
|
|
$('#chart-container').slideToggle( $(this).is(':checked') );
|
|
drawChart();
|
|
});
|
|
|
|
$icons.click(function(e) {
|
|
if ( $(e.target).hasClass('disabled') ) {
|
|
return true;
|
|
}
|
|
$icons.removeClass('active');
|
|
var $t = $(this).addClass('active');
|
|
$.each(types, function(i, v) {
|
|
if ($t.hasClass(v.icon)) {
|
|
settings.type = i;
|
|
}
|
|
});
|
|
drawChart();
|
|
});
|
|
|
|
$rowType.on('change', function() {
|
|
$table[0].config.widgetOptions.chart_incRows = $rowType.filter(':checked').attr('data-type');
|
|
// update data, then draw new chart
|
|
$table.trigger('chartData');
|
|
drawChart();
|
|
});
|
|
|
|
$table.on('columnUpdate pagerComplete', function(e) {
|
|
var table = this,
|
|
c = table.config,
|
|
t = types['pie'],
|
|
max = t && t.maxCol || 2;
|
|
setTimeout(function() {
|
|
if (table.hasInitialized) {
|
|
$table.trigger('chartData');
|
|
drawChart();
|
|
// update chart icons
|
|
if (typeof c.chart !== 'undefined') {
|
|
var cols = c.chart.data[0].length;
|
|
if (cols > max) {
|
|
$bar.find('.fa-cube, .fa-pie-chart').addClass('disabled');
|
|
if ($bar.find('.fa-cube, .fa-pie-chart').hasClass('active')) {
|
|
$bar.find('.fa-cube, .fa-pie-chart').removeClass('active');
|
|
$bar.find('.fa-line-chart').addClass('active');
|
|
}
|
|
} else {
|
|
$bar.find('.fa-cube, .fa-pie-chart').removeClass('disabled');
|
|
if (settings.type == 'pie') {
|
|
$bar.find('.active').removeClass('active');
|
|
$bar.find( settings.in3D ? '.fa-cube' : '.fa-pie-chart' ).addClass('active');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, 10);
|
|
});
|
|
|
|
$table
|
|
.tablesorter({
|
|
theme: 'blue',
|
|
sortList: [[0, 0]],
|
|
widgets: ['pager', 'zebra', 'filter', 'cssStickyHeaders', 'columnSelector', 'chart'],
|
|
widgetOptions: {
|
|
columnSelector_container: '#columnSelector',
|
|
cssStickyHeaders_filteredToTop: false,
|
|
pager_selectors: { container: '#pager' },
|
|
pager_output: 'Showing {startRow} to {endRow} of {filteredRows} results',
|
|
pager_size: 5,
|
|
chart_incRows: 'f',
|
|
chart_useSelector: true
|
|
}
|
|
});
|
|
|
|
});</script>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|