Title: Wp Custom Field Chart
Author: showi
Published: <strong>30. juli, 2014</strong>
Last modified: 18. august, 2014

---

Søg plugins

Dette plugin **er ikke blevet testet med de seneste 3 større udgivelser af WordPress**.
Det vedligeholdes eller understøttes muligvis ikke længere og kan have kompatibilitetsproblemer,
når det bruges med nyere versioner af WordPress.

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

# Wp Custom Field Chart

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

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

 * [Detaljer](https://da.wordpress.org/plugins/wp-custom-field-chart/#description)
 * [Vurderinger](https://da.wordpress.org/plugins/wp-custom-field-chart/#reviews)
 *  [Installation](https://da.wordpress.org/plugins/wp-custom-field-chart/#installation)
 * [Udvikling](https://da.wordpress.org/plugins/wp-custom-field-chart/#developers)

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

## Beskrivelse

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.

## Skærmbilleder

 * [[
 * 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 🙂

## Anmeldelser

Der er ingen anmeldelser for denne widget.

## Bidragsydere & udviklere

“Wp Custom Field Chart” er open source-software. Følgende personer har bidraget 
til dette plugin.

Bidragsydere

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

[Oversæt “Wp Custom Field Chart” til dit eget sprog.](https://translate.wordpress.org/projects/wp-plugins/wp-custom-field-chart)

### Interesseret i udvikling?

[Gennemse koden](https://plugins.trac.wordpress.org/browser/wp-custom-field-chart/),
tjek [SVN repository](https://plugins.svn.wordpress.org/wp-custom-field-chart/),
eller abonner på [udviklerloggen](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/)
via [RSS](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/?limit=100&mode=stop_on_copy&format=rss).

## Ændringslog

#### 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**
 *  Senest opdateret **12 år siden**
 *  Aktive installationer **10+**
 *  WordPress-version ** 3.9.1 eller højere **
 *  Testet op til **3.9.40**
 *  Sprog
 * [English (US)](https://wordpress.org/plugins/wp-custom-field-chart/)
 * Tags
 * [chart](https://da.wordpress.org/plugins/tags/chart/)[custom field](https://da.wordpress.org/plugins/tags/custom-field/)
   [javascript](https://da.wordpress.org/plugins/tags/javascript/)
 *  [Avanceret visning](https://da.wordpress.org/plugins/wp-custom-field-chart/advanced/)

## Bedømmelser

Der er endnu ikke indsendt nogen anmeldelser.

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

[Se alle anmeldelser.](https://wordpress.org/support/plugin/wp-custom-field-chart/reviews/)

## Bidragsydere

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

## Support

Har du noget at sige? Har du brug for hjælp?

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