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.

NSquared

TylerDigital

pwtyler

This is an extension for the popular <a href="https://wordpress.org/plugins/advanced-custom-fields/" rel="ugc">Advanced Custom Fields</a> plugin and <a href="https://wordpress.org/plugins/tablepress/" rel="ugc">TablePress</a> plugin. By itself, this plugin does NOTHING.
This add-on for Advanced Custom Fields creates a custom field type to select a TablePress table, providing a dropdown menu that lets you select from a list of available tables. The field can return the table ID for the table selected, or the full HTML of the table.
This plugin requires:
<ul>
<li>Advanced Custom Fields version 4+ or 5+</li>
<li>TablePress version 1.5+</li>
</ul>
Just to be sure there’s no confusion… This plugin does nothing unless <a href="https://wordpress.org/plugins/advanced-custom-fields/" rel="ugc">ACF</a> (Or <a href="http://www.advancedcustomfields.com/pro/" rel="nofollow ugc">ACF Pro</a>) and <a href="https://wordpress.org/plugins/tablepress/" rel="ugc">TablePress</a> are both active on your site
Follow this plugin on <a href="https://github.com/tylerdigital/acf-tablepress" rel="nofollow ugc">GitHub</a>
<h3>Using the Field</h3>
This field can return the table ID for the table selected, or the full HTML of the table (the same output as the rendered shortcode).
When returning the table ID, either of the following code snippets will output your table (replacing ‘your_table_here’ with the field name you defined in your ACF Field Group settings).
<pre><code><?php 
 $tablepress_id = get_field( 'your_field_here' );
 echo do_shortcode( '[table id="'.$tablepress_id.'"]' ); 
?>
</code></pre>
or, to avoid using <code>do_shortcode()</code>, use
<pre><code><?php
 $tablepress_id = get_field( 'your_field_here' );
 $args = array(
 'id' => $tablepress_id,
 );
 if ( function_exists( 'tablepress_print_table' ) ) {
 tablepress_print_table( $args );
 }
?>
</code></pre>
To simply display the chosen table on your page, choose the HTML output option in your field settings, and insert into your php with
<pre><code>the_field( 'your_field_here' );
</code></pre>
For a more detailed explanation, see our article, <a href="http://tylerdigital.com/document/setting-up-an-acf-field-for-tablepress/" rel="nofollow ugc">Setting up an ACF field for TablePress</a>.

ACF: TablePress

Tablepress is a good plugin and it's with ACF really fentastic easy to get any pages posts etc. any where really its very helpful to me..!! Thank you.



Fentastic!!!

ACF field type to select a TablePress table

TablePress Extension: Chartist vs ACF: TablePress