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.

Md Yakub Mizan

wptasker

Developer Hero

<p>Create beautiful, interactive HTML5 charts with Graphs & Charts.</p>
<p>A very user-friendly WordPress plugin to create beautiful, interactive charts and graphs. It has an interactive builder to show you live updates of the charts as you enter the data. The plugin supports 8 commonly used chart types. It’s completely free to use, well-designed and no paid upgrades needed ever. Embed anywhere with a shortcode.</p>
<h3>Eight Supported Chart Types</h3>
<p>The plugin currently supports 8 chart types.</p>
<ul>
<li>Pie</li>
<li>Doughnut</li>
<li>Polar</li>
<li>Bar</li>
<li>Line</li>
<li>Radar</li>
<li>Bubble</li>
<li>Scatter</li>
</ul>
<h3>Feature Overview</h3>
<ul>
<li>Interactive Editor</li>
<li>Fast and Easy to Use </li>
<li>Beautiful Charts</li>
<li>Integrated with WordPress Editor</li>
<li>Eight chart types</li>
<li>Unlimited Graphs</li>
<li>Supports All Modern Browsers</li>
</ul>
<h3>Interactive Editor</h3>
<p>A very user-friendly and interactive editor provides a smooth experience while building the graph. The graph will preview in the right pane of the editor while you are building it. We followed the patterns of WordPress’s user interface, so it feels very intuitive to the user.</p>
<h3>Fast and Easy to Use</h3>
<p>The plugin is built with Vue.js. It behaves like a single page webapp. There’s no need for page reload at all. It feels very fast and responsive to the user. Compared to the other plugins, Graphs & Charts provide significantly better user experience.</p>
<p>The plugin provides enough guide for the first time users to quickly grasp the interface.</p>
<h3>Beautiful Charts</h3>
<p>Charts are powered by <a href="http://www.chartjs.org/" rel="nofollow ugc">chartjs</a>, a very popular javascript library known for beautiful, interactive charts. All aspects of the charts are configurable to match the design of your site.</p>
<h3>Integrated with WordPress Editor</h3>
<p>The plugin is integrated with WordPress editor. There’s no need to go to another tab to access it. The whole app works from a single popup window that’s activated by clicking on the ‘Insert Graph’ on the toolbar.</p>
<h3>Unlimited Graphs</h3>
<p>There is no limits, no promotions or lock-ins. Use it free on unlimited sites. If you need advanced features or any customizations, our team can help.</p>
<p>If you find this plugin helpful, check our <a href="https://wp-tasker.com/wp" rel="nofollow ugc">other plugins</a> too.</p>


WordPress Graphs & Charts – Easy Interactive HTML5 Charts Plugin

The plugin is fast and works efficiently 

Fast and Efficient

A very user-friendly WordPress plugin to create beautiful, interactive charts and graphs. It has an interactive builder to show you live updates of th …

Wp Custom Field Chart vs WordPress Graphs & Charts – Easy Interactive HTML5 Charts Plugin