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.

themepalace

<p>This Plugin provides you an elegent Bar Graph and Pie Charts with multiple designs and colors. ie. Default Pie Chart, Doughnut Pie Chart and Polar Pie Chart.</p>
<h4>Customization and Flexibility</h4>
<p>TP PieBuilder offers you a very easy customization of color from shortcode. This plugin allows you to customize title from css.</p>
<h3>Shortcodes</h3>
<p>= Defaults Atts :- =<br />
    * title = ”, // Optional<br />
    * values = ”, // * in percentage (%) ( should be seperated by comma (‘,’). ie: 60, 40 )<br />
    * labels = ”, // * ( should be seperated by comma (‘,’). ie: Design, Development )<br />
    * colors = ” // Optional till 10 elements else * ( should be seperated by ‘,’. ie: #E6E6FA, #E0FFFF )</p>
<h4>Alt Atts for Pie Charts only:</h4>
<pre><code>* fontfamily = 'ariel', // Optional, you can change the defult font family
* fontstyle = 'italic', // Optional, you can change the defult font style to normal or bold
</code></pre>
<h4>Default Piechart Shortcode:</h4>
<pre><code>[TP_PIEBUILDER title="Pie Chart" values="20, 30, 50" labels="Design, Development, Production" colors="#E6E6FA, #E0FFFF, #F8B4BC"]
</code></pre>
<h4>Doughnut Piechart Shortcode:</h4>
<pre><code>[TP_PIEBUILDER_DOUGHNUT title="Pie Chart" values="20, 30, 50" labels="Design, Development, Production" colors="#E6E6FA, #E0FFFF, #F8B4BC"]
</code></pre>
<h4>Polar Piechart Shortcode:</h4>
<pre><code>[TP_PIEBUILDER_POLAR title="Pie Chart" values="20, 30, 50" labels="Design, Development, Production" colors="#E6E6FA, #E0FFFF, #F8B4BC"]
</code></pre>
<h4>Bar Graph Shortcode:</h4>
<pre><code>[TP_PIEBUILDER_BAR title="Pie Chart" values="20, 30, 50" labels="Design, Development, Production" colors="#E6E6FA, #E0FFFF, #F8B4BC"]
</code></pre>
<h4>Horizontal Bar Graph Shortcode:</h4>
<pre><code>[TP_PIEBUILDER_HORIZONTAL_BAR title="Pie Chart" values="20, 30, 50" labels="Design, Development, Production" colors="#E6E6FA, #E0FFFF, #F8B4BC"]
</code></pre>


TP PieBuilder

Easy to use plugin which works perfectly out of the box. Nice one!

Great!

Allow user to manipulate data on pie chart on your site with TP PieBuilder.

Wp Custom Field Chart vs TP PieBuilder