Title: Wp Custom Field Chart
Author: showi
Published: <strong>2014-يىلى 30-ئىيۇل</strong>
Last modified: 2014-يىلى 18-ئاۋغۇست

---

قىستۇرما ئىزدە

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

 يازغۇچى [showi](https://profiles.wordpress.org/showi/)

[چۈشۈر](https://downloads.wordpress.org/plugin/wp-custom-field-chart.0.0.5.zip)

 * [تەپسىلاتلار](https://ug.wordpress.org/plugins/wp-custom-field-chart/#description)
 * [باھالاشلار](https://ug.wordpress.org/plugins/wp-custom-field-chart/#reviews)
 *  [ئورنىتىش](https://ug.wordpress.org/plugins/wp-custom-field-chart/#installation)
 * [ئىجادىيەت](https://ug.wordpress.org/plugins/wp-custom-field-chart/#developers)

 [قوللاش](https://wordpress.org/support/plugin/wp-custom-field-chart/)

## چۈشەندۈرۈش

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.

## ئېكران كەسمىسى

[⌊One field for each chart (Two tags)⌉⌊One field for each chart (Two tags)⌉[

One field for each chart (Two tags)

[⌊Combined field in one chart (One Tag)⌉⌊Combined field in one chart (One Tag)⌉[

Combined field in one chart (One Tag)

[⌊Bar chart with different interval⌉⌊Bar chart with different interval⌉[

Bar chart with different _interval_

## ئورنىتىش

 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 🙂

## باھالاشلار

بۇ قىستۇرمىغا تېخى باھا يېزىلمىدى.

## تۆھپىكار ۋە ئىجادكار

«Wp Custom Field Chart» كودى ئوچۇق يۇمشاق دېتال. تۆۋەندىكى كىشىلەر بۇ قىستۇرمىغا
تۆھپە قوشقان.

تۆھپىكار

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

[«Wp Custom Field Chart» نى تىلىڭىزغا تەرجىمە قىلىڭ](https://translate.wordpress.org/projects/wp-plugins/wp-custom-field-chart)

### ئىجادىيەتكە قىزىقامسىز؟

[كودقا كۆز يۈگۈرتۈپ](https://plugins.trac.wordpress.org/browser/wp-custom-field-chart/)،
[SVN خەزىنە](https://plugins.svn.wordpress.org/wp-custom-field-chart/) تەكشۈرۈپ 
ياكى [RSS](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/?limit=100&mode=stop_on_copy&format=rss)
ئارقىلىق [ئىجادىيەت خاتىرىسى](https://plugins.trac.wordpress.org/log/wp-custom-field-chart/)
گە مۇشتەرى بولغىلى بولىدۇ.

## ئۆزگىرىش خاتىرىسى

#### 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**
 *  ئاخىرقى يېڭىلانغان ۋاقىت **12 يىل بۇرۇن**
 *  ئاكتىپ ئورنىتىش سانى **10+**
 *  WordPress نەشرى ** 3.9.1 ياكى يۇقىرى **
 *  **3.9.40** دا سىنالغان
 *  تىل
 * [English (US)](https://wordpress.org/plugins/wp-custom-field-chart/)
 * بەلگە
 * [chart](https://ug.wordpress.org/plugins/tags/chart/)[custom field](https://ug.wordpress.org/plugins/tags/custom-field/)
   [javascript](https://ug.wordpress.org/plugins/tags/javascript/)
 *  [ئالىي كۆرۈنۈش](https://ug.wordpress.org/plugins/wp-custom-field-chart/advanced/)

## دەرىجە

No reviews have been submitted yet.

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

[بارلىق ئىنكاسنى كۆرسەت](https://wordpress.org/support/plugin/wp-custom-field-chart/reviews/)

## تۆھپىكار

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

## قوللاش

چۈشەندۈرۈشىڭىز بارمۇ؟ ياردەم لازىممۇ؟

 [قوللاش مۇنبىرىنى كۆرسەت](https://wordpress.org/support/plugin/wp-custom-field-chart/)