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.

Moris Papasmadov

<p>Shortcode <code>[finviz ticker=GE]</code> embeds stock market chart from <a href="https://finviz.com" rel="nofollow ugc">finviz.com</a> financial visualizations<br />
Charts are dynamically refreshed on each page load</p>
<blockquote>
<p><code>[finviz ticker=GE]</code> embeds <a href="https://www.finviz.com/chart.ashx?t=GE&ty=c&ta=1&p=d&s=l" rel="nofollow ugc">chart</a> of <a href="https://finviz.com/quote.ashx?t=GE" rel="nofollow ugc">General Electric</a></p>
</blockquote>
<p>Option to <strong>hyperlink</strong> chart to finviz site ticker page<br />
Option to <strong>lazy load</strong> chart images<br />
Option to specify chart image <strong>alt</strong> attribute text prefix<br />
Option to specify chart image <strong>width</strong> <code>[finviz ticker=GE width=500]</code><br />
Option to specify chart <strong>type</strong> <a href="https://charts2.finviz.com/chart.ashx?t=GE&ty=l&ta=1&p=d&s=l" rel="nofollow ugc">line</a> or <a href="https://charts2.finviz.com/chart.ashx?t=GE&ty=c&ta=1&p=d&s=l" rel="nofollow ugc">candle</a><br />
Option to specify chart <strong>time period</strong> <a href="https://charts2.finviz.com/chart.ashx?t=GE&ty=c&p=d&s=l" rel="nofollow ugc">day</a>, <a href="https://charts2.finviz.com/chart.ashx?t=GE&ty=c&p=w&s=l" rel="nofollow ugc">week</a> or <a href="https://charts2.finviz.com/chart.ashx?t=GE&ty=c&p=m&s=l" rel="nofollow ugc">month</a><br />
Option to add <a href="https://charts2.finviz.com/chart.ashx?t=GE&ty=c&ta=1&p=d&s=l" rel="nofollow ugc">trailing averages</a> to only <code>daily</code> period chart</p>
<p>Chart images include small branded logo of finviz.com<br />
Please review the <a href="https://www.finviz.com/privacy.ashx" rel="nofollow ugc">privacy policy</a> of finviz.com</p>
<p>No API key or registration required.</p>


Stock market charts from finviz

Embed dynamic stock market charts from finviz.com

Wp Custom Field Chart vs Stock market charts from finviz