showi

<p>This plugin collect data attached to post/article via <strong>custom field</strong> and make<br />
chart of it.<br />
This plugin use <strong>Chart.js</strong> for chart drawing <a href="http://www.chartjs.org/" rel="nofollow ugc">ChartJs</a></p>
<p>Data are collected by looking for specific <em>custom field</em> attached to your<br />
post/page. You can change aggregation method, intervall…</p>
<p>See <a href="https://wordpress.org/plugins/wp-custom-field-chart/other_notes/" rel="ugc">usage</a></p>
<h3>Usage</h3>
<p>Edit your post/page in text mode and put some Javascript and a WordPress tag</p>
<h4>Minimum</h4>
<pre><code><script>
var mydata = { datasets: [{}]};
</script>
[custom_field_chart fields="humidity" js_data="mydata"]
</code></pre>
<p>For each field you need to put empty {} into datasets.</p>
<p>For two fields:</p>
<pre><code><script>
var mydata = {datasets: [{},{}]}
</script>
[custom_field_chart fields="humidity,temperature" js_data="mydata"]
</code></pre>
<p>But it’s pretty useless to put more than one field without different colors 🙂</p>
<h4>More</h4>
<pre><code><script>
var mydata = {
    datasets: [
        {
            label: "Humidity",
            fillColor: "rgba(255,73,0,1)",
            strokeColor: "rgba(255,73,0,1)",
            pointColor: "rgba(255,73,0,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
        },
        {
            label: "Temperature",
            fillColor: "rgba(255,73,0,1)",
            strokeColor: "rgba(255,73,0,1)",
            pointColor: "rgba(255,73,0,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
        },
    ]
};

var myopts = {
    pointDotRadius: 1,
    bezierCurveTension: 0.2,
    barStrokeWidth : 2,
    barValueSpacing : 2,
    barDatasetSpacing : 0,
};

// Optional...
jQuery(window).load(function() {
    Chart.defaults.global.responsive = true;
    Chart.defaults.global.animationEasing = "easeOutBounce";
    Chart.defaults.global.onAnimationComplete = function(){
        alert('Hello');
    }
});
// End optional
</script>

[custom_field_chart width="1000" height="300"
  kind="line" method="track" interval="day" interval_count="31" 
  fields="humidity,temperature" js_data="mydata" js_options="myopts"]
</code></pre>
<h4>Notes</h4>
<ol>
<li>js_data and js_options must reflect name given to your javascript variable.</li>
<li>Look at http://chartjs.org/ for documentation</li>
<li>You don’t need to supply labels and data (like in chartjs.org example) 🙂</li>
</ol>
<h3>Tag attributes</h3>
<p>= Required =<br />
1. <em>fields</em>: Custom field separate by comma<br />
1. <em>js_data</em>: Name of javascript variable holding chart datasets</p>
<h4>Optional</h4>
<ol>
<li><em>width</em>: Chart width (default: 400)</li>
<li><em>height</em>: Chart Height (default: 200)</li>
<li><em>method</em>: Aggregate method track, delta or cumulative (defaul: track)</li>
<li><em>interval</em>: year, month, day (default: day)</li>
<li><em>interval_count</em>: How many year, mont or day (default: 31)</li>
<li><em>js_options</em>: Name of javascript variable holding chart options</li>
<li><em>kind</em>: Chart type line or bar (default: line)</li>
<li><em>to_date</em>: Current date by default, post date if ‘post’ specified else value supplied </li>
<li><em>dump</em>: Dumping attributes for debug (default: False)</li>
<li><em>round</em>: Rounding data with specified precision</li>
</ol>
<h3>Note</h3>
<p>Beta software… Interface may change.</p>


Wp Custom Field Chart

Make chart from custom field attached to your post/page using Chart.js javascript library.

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.

Wp Custom Field Chart vs TablePress Extension: Chartist