# Charts

## 1. PIECHART

Returns URL of dynamically formed .svg image, that represents given data as Pie Chart. Chart legend (if turned on) will show proper data with their values and percentage, and total.

{% tabs %}
{% tab title="Usage" %}
`PIECHART(values_json_array, size, has_legend, font_size)` 

Parameters:

* `values_json_array`  - user data in JSON array. Each array item has the following properties:
  * mandatory decimal `value` that represents value of chart item
  * optional string `title` that will be written in chart legend next to proper item between after it's value and before percentage.
  * optional string `color` that will be applied to chart sector representing the proper value. If omit this property, system will assign a random color.
* `size` - chart diameter size in pixels. If legend is on, width will be 2 times bigger. This argument is optional (set it to **null** if you do not want to specify size); default size is 100.
* `has_legend` - set to **true** if legend should be displayed, set to **null** or **false** if not.
* `font_size` - font size of legend (in pixels). If set to **null**, font size will be calculated to fit the chart height, but not more than 19px.

{% hint style="warning" %}
Note: Pie chart support up to 20 values. Other will be combined together and their value will be shown summarized as 21th sector.
{% endhint %}
{% endtab %}

{% tab title="Example" %}
{% code overflow="wrap" %}

```

PIECHART('{OPEN_SQR_BKT}{"value":"1","color":"red"},{"value":"2","title":"2 TEST"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"},{"value":"7"},{"value":"8"},{"value":"9"},{"value":"10"},{"value":"11"},{"value":"12"},{"value":"13"},{"value":"14"},{"value":"15"},{"value":"16"},{"value":"17"},{"value":"18"},{"value":"19"},{"value":"20"},{"value":"21"},{"value":"22"},{"value":"23"}{CLOSE_SQR_BKT}', 300, true, 14)
```

{% endcode %}

returns an **URL** for such picture:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FQ8OAB4SLxETC99zuVrm7%2Fimage.png?alt=media&#x26;token=a4f6d42e-8a52-4724-9c26-f126d54cc021" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 2. DONUTCHART

Returns URL of dynamically formed .svg image, that represents given data as Donut Chart. Chart legend (if turned on) will show proper data with their values and percentage. Total (if allowed) will be shown in the chart center hole.

{% tabs %}
{% tab title="Usage" %}
`DONUTCHART(values_json_array, size, hole_size, has_legend, font_size, has_total)`

Parameters:

* `values_json_array`  - User data in JSON array. Each array item has the following properties:
  * Mandatory decimal `value` that represents value of chart item
  * Optional string `title` that will be written in chart legend next to proper item between after it's value and before percentage.
  * Optional string `color` that will be applied to chart sector representing the proper value. If omit this property, system will assign a random color.
* `size` - Chart diameter size in pixels. If legend is on, width will be 2 times bigger. This argument is optional (set it to **null** if you do not want to specify size); default size is 100.
* `hole_size` - Chart hole radius size in pixels (or **null**). Default value will be calculated as 60% of chart radius.
* `has_legend` - Set to **true** if legend should be displayed, set to **null** or **false** if not.
* `font_size` - Font size of legend (in pixels). If If set to **null**, font size will be calculated to fit the chart height, but not more than 19px.
* `has_total` - Set to **true** if total sum should be displayed, set to **null** or **false** if not. Total will be displayed in the center of donut hole. The font size of total depends on hole size and fits it automatically.

{% hint style="warning" %}
Note: Donut chart support up to 20 values. Other will be combined together and their value will be shown summarized as 21th sector.
{% endhint %}
{% endtab %}

{% tab title="Example" %}
{% code overflow="wrap" %}

```
{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"},{"value":"7"},{"value":"8"},{"value":"9"},{"value":"10"},{"value":"11"},{"value":"12"},{"value":"13"},{"value":"14"},{"value":"15"},{"value":"16"},{"value":"17"},{"value":"18"},{"value":"19"},{"value":"20"},{"value":"21"},{"value":"22"},{"value":"23"}{CLOSE_SQR_BKT}', 300, 35, true, 14, true)
```

{% endcode %}

returns an **URL** for such picture:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FPEne8ugZWYtEW2yBpM6n%2Fimage.png?alt=media&#x26;token=bdd04a88-5c66-4acc-b7e4-0087c980547d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 3. PROGRESSCHART

Returns URL of dynamically formed .svg image, that represents given data as Progress Bar Chart. Chart legend (if turned on) will show value with it's percentage.

{% tabs %}
{% tab title="Usage" %}
`PROGRESSCHART(value, total, width, height, has_legend, font_size, color, bg_color, border_color, font_color)`

Parameters:

* `value` - Actual decimal value (mandatory).
* `total` - Maximum which value can reach (mandatory).
* `width` - Chart width in pixels (optional). Default = 100.  If legend is shown, it will take some of this place.
* `height` - Chart height in pixels (optional). Default = 100.
* `has_legend` - Set to **1** if legend should be displayed, omit or set to **0** if not.
* `font_size` - Font size of legend (in pixels, optional). If omit, font size will be calculated to fit the chart height, but not more than 19px.
* `color` - color of filled part of progress chart (optional, default is gray).
* `bg_color` - color of progress chart background (optional, default is light gray).
* `border_color` - color of progress chart border (optional, by default it is inherited from the color of filled part of progress chart).
* `font_color` - color of legend text (optional, default is black).

{% hint style="info" %}
Note: parameters noted as optional should be present in function expression. Do not omit them, instead set them to *null* if you do not need override default values.
{% endhint %}
{% endtab %}

{% tab title="Example 1" %}
`PROGRESSCHART(55, 400,null,null,null,null,null,null,null,null)` returns an **URL** for such picture:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FlimGOXZh0nmPgW9vps2G%2Fimage.png?alt=media&#x26;token=d19cc93b-33b2-4fcb-9e4c-0b76e333b7fa" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}
`PROGRESSCHART(55, 400,300,30,true,16,coral,pink,red,magenta)` returns an **URL** for such picture:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2F6YwBDhgaGBezSJvkcw66%2Fimage.png?alt=media&#x26;token=ac0bd8f1-71fa-4b2e-b8ed-9bfed122a00f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

##