Per Søderlind

silsha

Using <a href="http://gionkunz.github.io/chartist-js/" rel="nofollow ugc">Chartist.js</a>, this <a href="https://wordpress.org/plugins/tablepress/" rel="ugc">TablePress</a> Extension creates a responsive chart based on the data in a TablePress table.
<h4>Use</h4>
Add the Shortcode <code>[table-chart id=123 /]</code> to a post or page to create a chart from the TablePress table 123.
Optional parameters:
<ul>
<li>Show/hide chart line: <code>showline=true</code> (default: true)</li>
<li>Show/hide show chart area: <code>showarea=false</code> (default: false)</li>
<li>Set chart y low: <code>low=0</code> (default: table low)</li>
<li>Set chart y high: <code>high=10</code> (default: table high)</li>
<li>Set line with of the donut chart: <code>donut_width=200</code> (default: false)</li>
<li>Enable/disable smooth line: <code>linesmooth=true</code> (default: true)</li>
<li>Enable/disable line points: <code>showpoint=true</code> (default: true)</li>
<li>Enable/disable horizontal bars: <code>horizontal=true</code> (default: false)</li>
<li>Enable/disable stacked bars: <code>stack=true</code> (default: false)</li>
<li>Set chart aspect ratio: <code>aspect_ratio=3:4</code> (default: 3:4) Alternatives: 1, 15:16, 8:9, 5:6, 4:5, 3:4, 2:3, 5:8, 1:1.618, 3:5, 9:16, 8:15, 1:2, 2:5, 3:8, 1:3, or 1:4</li>
<li>Select chart type: <code>chart=bar</code> (default: line) Alternatives: line, bar, pie, donut, percent or piepercent (mix of pie and percent).</li>
<li>Set label offset: <code>label_offset=100</code> (default: false)</li>
<li>Set chart padding: <code>chart_padding=100</code> (default: false)</li>
<li>Use animations (not available for all chart types): <code>animation=buildup</code> (default: false)</li>
</ul>
If the “Table Head Row” option is enabled for the table, the Extension will use the head row data for the chart labels. 
The other rows will be shown as lines or bars. Pie or percent charts will only use the first data row. Percent charts will ignore the header row.
<h4>CSS customizations</h4>
If you’d like to overide <a href="http://gionkunz.github.io/chartist-js/getting-started.html#the-sass-way" rel="nofollow ugc">the default style</a>, you can add a <code>tablepress-chartist-custom.css</code> in <code>wp-content</code> directory. It will be loaded after the Extension’s default CSS file <code>libdist/chartist.min.css</code>.
Example:
<pre><code>/**
 * SVG Shape CSS properties: http://tutorials.jenkov.com/svg/svg-and-css.html#shape-css-properties
 */

/* First line / bar is .ct-series-a, next is .ct-series-b etc. */
.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point {
 stroke: #073DA0;
}

.ct-series .ct-line, .ct-chart .ct-bar {
 fill: none;
 stroke-width: 10px;
}

.ct-chart .ct-point {
 stroke-width: 10px;
 stroke-linecap: round;
}
</code></pre>

TablePress Extension: Chartist

Create a responsive chart based on the data in a TablePress table.

Farhan Noor

Table Sorter turns standard HTML table (with THEAD and TBODY tags) into a sortable table without page refresh. It works on every table, whether it is coded in the wordpress template(theme) file or generated from the wordpress editor. This plugin is very handy for theme developers. It has many useful features including :
<ol>
<li>Multi-column sorting.</li>
<li>Disable sorting from particular column(s).</li>
<li>Sort multiple columns simultaneously.</li>
<li>Cross-browser support</li>
</ol>
For complete documentation and demo, please visit <a href="http://wpreloaded.com/table-sorter" rel="nofollow ugc">WP Table Sorter</a> plugin support page.
NOTE This plugin works at code level and provides only one opiton under Settings section in WordPress admin panel.
Happy coding!

Table Sorter

This plugin is excellent and saved me a ton of work trying to make a sortable column. Thank you!

Perfect


Doesn't work for dynamically updated tables (using Javascript).  Will duplicate rows.  



It also has no way to keep certain rows (like a total at the end old the table) from being sorted.



There is zero support if it doesn't work for you, I have a table column that won't sort at all, who knows why?


GENERALLY works well for STATIC tables

No more old static tables, make your HTML tables sortable.

TablePress Extension: Chartist vs Table Sorter