Title: Wp Custom Field Chart
Author: showi
Published: <strong>30 de juliol de 2014</strong>
Last modified: 18 d'agost de 2014

---

Cerca extensions

Aquesta extensió **no s’ha provat en les darreres 3 versions majors del WordPress**.
Segurament no està mantinguda o suportada, i pot tenir problemes de compatibilitat
quan s’usa en versions recents del WordPress.

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

# Wp Custom Field Chart

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

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

 * [Detalls](https://ca.wordpress.org/plugins/wp-custom-field-chart/#description)
 * [Ressenyes](https://ca.wordpress.org/plugins/wp-custom-field-chart/#reviews)
 *  [Instal·lació](https://ca.wordpress.org/plugins/wp-custom-field-chart/#installation)
 * [Desenvolupament](https://ca.wordpress.org/plugins/wp-custom-field-chart/#developers)

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

## Descripció

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.

## Captures

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

## Instal·lació

 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)

## PMF

No FAQ 🙂

## Ressenyes

No hi ha ressenyes per a aquesta extensió.

## Col·laboradors i desenvolupadors

«Wp Custom Field Chart» és programari de codi obert. La següent gent ha col·laborat
en aquesta extensió.

Col·laboradors

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

[Traduïu «Wp Custom Field Chart» a la vostra llengua.](https://translate.wordpress.org/projects/wp-plugins/wp-custom-field-chart)

### Interessats en el desenvolupament?

[Navegueu pel codi](https://plugins.trac.wordpress.org/browser/wp-custom-field-chart/),
baixeu-vos el [repositori SVN](https://plugins.svn.wordpress.org/wp-custom-field-chart/),
o subscriviu-vos al [registre de desenvolupament](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/)
per [fisl de subscripció RSS](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/?limit=100&mode=stop_on_copy&format=rss).

## Registre de canvis

#### 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

 *  Versió **0.0.5**
 *  Darrera actualització **fa 12 anys**
 *  Instal·lacions actives **10+**
 *  Versió del WordPress ** 3.9.1 o posterior **
 *  Provada fins a **3.9.40**
 *  Idioma
 * [English (US)](https://wordpress.org/plugins/wp-custom-field-chart/)
 * Etiquetes
 * [chart](https://ca.wordpress.org/plugins/tags/chart/)[custom field](https://ca.wordpress.org/plugins/tags/custom-field/)
   [javascript](https://ca.wordpress.org/plugins/tags/javascript/)
 *  [Vista avançada](https://ca.wordpress.org/plugins/wp-custom-field-chart/advanced/)

## Valoracions

Encara no s'ha enviat cap ressenya.

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

[Visualitzeu totes les ressenyes](https://wordpress.org/support/plugin/wp-custom-field-chart/reviews/)

## Col·laboradors

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

## Suport

Teniu quelcom a dir? Necessiteu ajuda?

 [Visualitza els fòrums de suport](https://wordpress.org/support/plugin/wp-custom-field-chart/)