Title: Wp Custom Field Chart
Author: showi
Published: <strong>ജൂലൈ 30, 2014</strong>
Last modified: ഓഗസ്റ്റ്‌ 18, 2014

---

Search plugins

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://s.w.org/plugins/geopattern-icon/wp-custom-field-chart.svg)

# Wp Custom Field Chart

 By [showi](https://profiles.wordpress.org/showi/)

[Download](https://downloads.wordpress.org/plugin/wp-custom-field-chart.0.0.5.zip)

 * [Details](https://ml.wordpress.org/plugins/wp-custom-field-chart/#description)
 * [Reviews](https://ml.wordpress.org/plugins/wp-custom-field-chart/#reviews)
 *  [Installation](https://ml.wordpress.org/plugins/wp-custom-field-chart/#installation)
 * [Development](https://ml.wordpress.org/plugins/wp-custom-field-chart/#developers)

 [Support](https://wordpress.org/support/plugin/wp-custom-field-chart/)

## Description

This plugin collect data attached to post/article via **custom field** and make

chart of it. This plugin use **Chart.js** for chart drawing [ChartJs](http://www.chartjs.org/)

Data are collected by looking for specific _custom field_ attached to your
 post/
page. You can change aggregation method, intervall…

See [usage](https://wordpress.org/plugins/wp-custom-field-chart/other_notes/)

### Usage

Edit your post/page in text mode and put some Javascript and a WordPress tag

#### Minimum

    ```
    <script>
    var mydata = { datasets: [{}]};
    </script>
    [custom_field_chart fields="humidity" js_data="mydata"]
    ```

For each field you need to put empty {} into datasets.

For two fields:

    ```
    <script>
    var mydata = {datasets: [{},{}]}
    </script>
    [custom_field_chart fields="humidity,temperature" js_data="mydata"]
    ```

But it’s pretty useless to put more than one field without different colors 🙂

#### More

    ```
    <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"]
    ```

#### Notes

 1. js_data and js_options must reflect name given to your javascript variable.
 2. Look at http://chartjs.org/ for documentation
 3. You don’t need to supply labels and data (like in chartjs.org example) 🙂

### Tag attributes

= Required =
 1. _fields_: Custom field separate by comma 1. _js\_data_: Name of
javascript variable holding chart datasets

#### Optional

 1.  _width_: Chart width (default: 400)
 2.  _height_: Chart Height (default: 200)
 3.  _method_: Aggregate method track, delta or cumulative (defaul: track)
 4.  _interval_: year, month, day (default: day)
 5.  _interval\_count_: How many year, mont or day (default: 31)
 6.  _js\_options_: Name of javascript variable holding chart options
 7.  _kind_: Chart type line or bar (default: line)
 8.  _to\_date_: Current date by default, post date if ‘post’ specified else value 
     supplied
 9.  _dump_: Dumping attributes for debug (default: False)
 10. _round_: Rounding data with specified precision

### Note

Beta software… Interface may change.

## Screenshots

 * [[
 * One field for each chart (Two tags)
 * [[
 * Combined field in one chart (One Tag)
 * [[
 * Bar chart with different _interval_

## Installation

 1. Upload the entire `wp-custom-field-chart` folder to the `/wp-content/plugins/` 
    directory
 2. Activate the plugin through the ‘Plugins’ menu in WordPress
 3. Include [custom_field_chart] tag in your post/page (See Other Notes)

## FAQ

No FAQ 🙂

## Reviews

ഈ പ്ലഗിന് റിവ്യൂകൾ ഒന്നുമില്ല.

## Contributors & Developers

“Wp Custom Field Chart” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ showi ](https://profiles.wordpress.org/showi/)

[Translate “Wp Custom Field Chart” into your language.](https://translate.wordpress.org/projects/wp-plugins/wp-custom-field-chart)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/wp-custom-field-chart/),
check out the [SVN repository](https://plugins.svn.wordpress.org/wp-custom-field-chart/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/)
by [RSS](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 0.0.5

 * Bump Chart.js version to 1.0.1-beta.4
 * Better use of Field object, cleaning of old code

#### 0.0.4

 * Add _round_ and _dump_ attribute
 * Using _Field_ class everywhere

#### 0.0.3

 * More attribute validation and default
 * Now as to_date default, introducing post to specify post date as to_date
 * Better readme, well more informations…

#### 0.0.2

 * Uploading some screenshots
 * Improved readme.txt

#### 0.0.1

 * Beta Release

## Meta

 *  Version **0.0.5**
 *  Last updated **12 വര്‍ഷങ്ങള്‍ ago**
 *  Active installations **10+**
 *  WordPress version ** 3.9.1 അല്ലെങ്കില്‍ അതിലും ഉയര്‍ന്നത് **
 *  Tested up to **3.9.40**
 *  Language
 * [English (US)](https://wordpress.org/plugins/wp-custom-field-chart/)
 * Tags
 * [chart](https://ml.wordpress.org/plugins/tags/chart/)[custom field](https://ml.wordpress.org/plugins/tags/custom-field/)
   [javascript](https://ml.wordpress.org/plugins/tags/javascript/)
 *  [Advanced View](https://ml.wordpress.org/plugins/wp-custom-field-chart/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/wp-custom-field-chart/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/wp-custom-field-chart/reviews/)

## Contributors

 *   [ showi ](https://profiles.wordpress.org/showi/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/wp-custom-field-chart/)