Peter J. Herrel

<p>The Category Pie plugin for WordPress adds a pie chart to the administration pages for categories, tags and custom taxonomies. For non-hierarchical taxonomies like post tags the top 10 is displayed.</p>
<h4>License</h4>
<p>The Category Pie plugin for WordPress is released under GPLv3, you can use it free of charge on your personal or commercial website.</p>
<h4>Documentation</h4>
<p>Visit the <a href="https://github.com/diggy/Category-Pie/wiki" title="plugin wiki" rel="nofollow ugc">plugin wiki</a> on Github.</p>
<h4>Support</h4>
<p>Find support at the <a href="https://wordpress.org/support/plugin/category-pie" title="WordPress support forums" rel="ugc">WordPress support forums</a>.</p>
<h4>Contribute</h4>
<p>Check out the source code on <a href="https://github.com/diggy/Category-Pie" title="Github" rel="nofollow ugc">Github</a>.</p>
<h4>Donate</h4>
<p>If you enjoy the Category Pie plugin, please consider making a small <a href="http://peterherrel.com/donate/" title="donation" rel="nofollow ugc">donation</a>. Thanks!</p>


Category Pie

The Category Pie plugin for WordPress adds a bit of extra flavor to those otherwise boring category administration pages.

Per Søderlind

silsha

<p>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.</p>
<h4>Use</h4>
<p>Add the Shortcode <code>[table-chart id=123 /]</code> to a post or page to create a chart from the TablePress table 123.</p>
<p>Optional parameters:</p>
<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>
<p>If the “Table Head Row” option is enabled for the table, the Extension will use the head row data for the chart labels.<br />
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.</p>
<h4>CSS customizations</h4>
<p>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>.</p>
<p><strong>Example:</strong></p>
<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.

Category Pie vs TablePress Extension: Chartist