showi

This plugin collect data attached to post/article via custom field and make 
chart of it. 
This plugin use Chart.js for chart drawing <a href="http://www.chartjs.org/" rel="nofollow ugc">ChartJs</a>
Data are collected by looking for specific custom field attached to your 
post/page. You can change aggregation method, intervall…
See <a href="https://wordpress.org/plugins/wp-custom-field-chart/other_notes/" rel="ugc">usage</a>
<h3>Usage</h3>
Edit your post/page in text mode and put some Javascript and a WordPress tag
<h4>Minimum</h4>
<pre><code><script>
var mydata = { datasets: [{}]};
</script>
[custom_field_chart fields="humidity" js_data="mydata"]
</code></pre>
For each field you need to put empty {} into datasets.
For two fields:
<pre><code><script>
var mydata = {datasets: [{},{}]}
</script>
[custom_field_chart fields="humidity,temperature" js_data="mydata"]
</code></pre>
But it’s pretty useless to put more than one field without different colors 🙂
<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>
= Required = 
1. fields: Custom field separate by comma 
1. js_data: Name of javascript variable holding chart datasets
<h4>Optional</h4>
<ol>
<li>width: Chart width (default: 400)</li>
<li>height: Chart Height (default: 200)</li>
<li>method: Aggregate method track, delta or cumulative (defaul: track)</li>
<li>interval: year, month, day (default: day)</li>
<li>interval_count: How many year, mont or day (default: 31)</li>
<li>js_options: Name of javascript variable holding chart options</li>
<li>kind: Chart type line or bar (default: line)</li>
<li>to_date: Current date by default, post date if ‘post’ specified else value supplied </li>
<li>dump: Dumping attributes for debug (default: False)</li>
<li>round: Rounding data with specified precision</li>
</ol>
<h3>Note</h3>
Beta software… Interface may change.

Wp Custom Field Chart

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

Stockdio

Stockdio Historical Chart contains a plugin and a widget that provide the means to display a live chart with intraday and historical prices and information for stock, index, currencies or commodities. Over 65 different stock exchanges and a large number of market indices, currencies and commodities are supported.
If you’re using the standard Gutenberg editor, the easiest way to include this plugin on your page is using the Historical Chart block, which is included in the Stockdio Financial Visualizations category.
If you’re using a different editor o prefer to use the shortcode, below is a sample to help you start. Please be aware that most of the parameters listed below are optional, and are also available through the plugin’s settings page. Any parameter you include in the shortcode will overwrite the parameter used in the settings page.
<pre><code>[stockdio-historical-chart symbol="AAPL" stockExchange="USA" width="580" height="380" motif="financial" palette="financial-light"]
</code></pre>
This plugin is part of the Stockdio Financial Widgets, which also includes the following plugins:
<ul>
<li><a href="https://wordpress.org/plugins/stock-quotes-list/" rel="ugc">Stock Quotes List</a>.</li>
<li><a href="https://wordpress.org/plugins/stock-market-overview/" rel="ugc">Stock Market Overview</a>.</li>
<li><a href="https://wordpress.org/plugins/stock-market-news/" rel="ugc">Stock Market News</a>.</li>
<li><a href="https://wordpress.org/plugins/stock-market-ticker/" rel="ugc">Stock Market Ticker</a>.</li>
<li><a href="https://wordpress.org/plugins/economic-market-news/" rel="ugc">Economic & Market News</a>.</li>
</ul>
The following parameters are supported in the shortcode and also available through the plugin’s settings page:
stockExchange: The exchange market the symbol is a member of (optional). If not specified, NYSE/NASDAQ will be used by default. For a list of available exchanges please visit www.stockdio.com/exchanges.
symbol: The company’s stock symbol (ex. AAPL), market index ticker (ex. ^SPX), currency pair (ex. EUR/USD) or commodity ticker (ex. GC). For a list of available market indices please visit www.stockdio.com/indices. For available currencies please visit www.stockdio.com/currencies and for available commodities, please go to www.stockdio.com/commodities.
compare: Specify a list of valid stock symbols or market indices against which to compare the base symbol, separated by semicolon (ex. MSFT;GOOG;^SPX;^IXIC). Not case sensitive (optional).
height: Height of the chart in either px or % (default: 320px).
width: Width of the chart in either px or % ( default: 100%).
displayPrices: Allows to specify how to display the prices on the chart, using one of the following options (default: Line):
<ul>
<li>Line</li>
<li>Candlestick</li>
<li>Area</li>
<li>OHLC</li>
<li>HLC</li>
</ul>
includeVolume: Allows to display or hide the volume on the chart. By default, volume is visible. Use includeVolume=false to hide it (optional).
performance: If enabled (true), price performance (percent change) will be displayed, instead of actual price.
culture: Allows to specify a combination of language and country settings, used to display texts and to format numbers and dates (e.g. Spanish-Spain). For a list of available culture combinations please visit http://www.stockdio.com/cultures.
intraday: If enabled (true), intraday delayed data will be used if available for the exchange and number of days is between 1 and 5. For a list of exchanges with intraday data available, please visit www.stockdio.com/exchanges.
days: Allows to specify the number of days for the period to display. Used only if the start and/or the end date are not specified. If not specified, its default value is 365 days. If intraday data is available for the stock exchange and the exchange is currently open, the default number of days is 1.
allowPeriodChange: If enabled (true), it provides a UI to allow the end user to select the period for the data to be displayed. This UI is only available if the from and to parameters have not been specified. This UI is enabled by default.
from: From date. If not specified, the “from” date will be the “to” date minus the number of days specified in the days parameter.
to: To date. If not specified, the “to” date will be today’s date.
motif: Design used to display the visualization with specific aesthetics, including borders and styles, among other elements. (optional). For a list of available motifs please visit www.stockdio.com/motifs.
palette: Includes a set of consistent colors used for the visualization. (optional). For a list of available palettes please visit www.stockdio.com/palettes.
font: Allows to specify the font that will be used to render the chart. Multiple fonts may be specified separated by comma, e.g. Lato,Helvetica,Arial.
loadDataWhenVisible: Allows to fetch the data and display the visualization only when it becomes visible on the page, in order to avoid using calls (requests) when they are not needed. This is particularly useful when the visualization is not visible on the page by default, but it becomes visible as result of a user interaction (e.g. clicking on an element, etc.). It is also useful when using the same visualization multiple times on a page for different devices (e.g. using one instance of the plugin for mobile and another one for desktop). We recommend not using this by default but only on scenarios as those described above, as it may provide the end user with a small delay to display the visualization (optional).

Stockdio Historical Chart

WordPress plugin and widget for displaying stock market live charts and technical indicators.

Wp Custom Field Chart vs Stockdio Historical Chart