---
url: https://gudhub.com/uk/docs/gh-elements/graph/
title: "Graph\n                #"
description: "Graph is a gh element that allows to generate graphs using different item data. You can use graphs to track product sales, profit statistics or other things you"
lang: uk
updated: 2026-09-12T04:11:35.637Z
---

# Graph [#](https://gudhub.com/uk/docs/gh-elements/graph/#graph)

**Graph** is a gh-element that allows to generate graphs using different item data. You can use graphs to track product sales, profit statistics or other things you wish by date.

## Functional Characteristics [#](https://gudhub.com/uk/docs/gh-elements/graph/#functional-characteristics)

The purpose of this element is to display various statistics by dates. The graph can display different statistics at the same time for comparison.

## Value Format [#](https://gudhub.com/uk/docs/gh-elements/graph/#value-format)

This element does not contains any value.

## Element Options [#](https://gudhub.com/uk/docs/gh-elements/graph/#element-options)

All parts of the current element are configured with three groups of settings.

### Field Settings [#](https://gudhub.com/uk/docs/gh-elements/graph/#field-settings)

The first group is the standard set of [field settings](https://gudhub.com/uk/docs/understanding-gudhub/gh-elements-structure/setting-overview/).

![Settings of graph field](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/graph-field-settings.jpg "Graph field settings")

### Main Settings [#](https://gudhub.com/uk/docs/gh-elements/graph/#main-settings)

The main settings configures the main element functions and connects the certain application and fields.

![Main settings of graph element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/graph-main-settings.jpg "Graph main settings")

| Name | Description |
| :-- | :-- |
| Source App | allows to select the source application; [details...](#source-app) |
| Date field | allows to select the source date field; [details...](#date-field) |
| Summ by | allows you to select the field by which the elements will be summarized; [details...](#summ-by) |
| Group items by | allows to select by which day period items will be grouped; [details...](#group-items-by) |
| Initial range start date | allows to set the start date of the time range of the graph; [details...](#initial-range-start-date) |
| Initial range end date | allows to set the end date of the time range of the graph; [details...](#initial-range-end-date) |
| Graph height, px | allows to set the graph height; [details...](#graph-height) |

#### **Source App** [#](https://gudhub.com/uk/docs/gh-elements/graph/#source-app)

This is the application from which the desired fields and items will be taken.

#### **Date Field** [#](https://gudhub.com/uk/docs/gh-elements/graph/#date-field)

This is the date until which the items will be displayed on the chart. This field is one of the fields responsible for the placement of element points on the chart.

#### **Summ By** [#](https://gudhub.com/uk/docs/gh-elements/graph/#summ-by)

This function allows to select the field by which the items will be summed. This means that this field is used for the vertical scale and for placing points of elements on the chart.

#### **Group Items By** [#](https://gudhub.com/uk/docs/gh-elements/graph/#group-items-by)

Select the day period by which the items dots will be grouped. This means that elements of the same period will be displayed on the same vertical line. There are five set value:

-   Day
-   Week
-   Month
-   Quarter
-   Year

#### **Initial Range Start Date** [#](https://gudhub.com/uk/docs/gh-elements/graph/#initial-range-start-date)

This is one of functions that allows you to set the start limit of the lower scale.

#### **Initial Range End Date** [#](https://gudhub.com/uk/docs/gh-elements/graph/#initial-range-end-date)

This setting allows you to set the end date of the graph time period.

#### **Graph Height** [#](https://gudhub.com/uk/docs/gh-elements/graph/#graph-height)

This is the height of the graph element. You can select the desired value in pixels.

### Groups Settings [#](https://gudhub.com/uk/docs/gh-elements/graph/#groups-settings)

The last group of settings allows to create a groups of items. They will be displayed in the graph as a similar connected points.

![Settings of graph groups](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/graph-groups-settings.jpg "Graph groups settings")

| Name | Description |
| :-- | :-- |
| Group Name | allows to enter the group name; [details...](#group-name) |
| Graph color | allows to select the color of the group mark that will be displayed in the graph; [details...](#graph-color) |
| Conditions | allows to configure which items are contained in this group; [details...](#conditions) |
| Edit | allows to edit or delete the group; [details...](#edit) |

#### **Group Name** [#](https://gudhub.com/uk/docs/gh-elements/graph/#group-name)

This is the name of the group, which you can enter yourself.

#### **Graph Color** [#](https://gudhub.com/uk/docs/gh-elements/graph/#graph-color)

This is the color of the group mark. All elements of this group will be displayed on the graph as a point of the selected color.

#### **Conditions** [#](https://gudhub.com/uk/docs/gh-elements/graph/#conditions)

This feature allows you to add filters to create conditions that determine which items are contained in a particular group.

#### **Edit** [#](https://gudhub.com/uk/docs/gh-elements/graph/#edit)

This column consists of two buttons which allows you to delete or edit the group.

## Element Style [#](https://gudhub.com/uk/docs/gh-elements/graph/#element-style)

Despite its complex appearance, the gh-element has only [standard style settings](https://gudhub.com/uk/docs/understanding-gudhub/gh-elements-structure/setting-overview/). The graph interpretation types are described [below](#interpretation).

![Style of graph element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/graph-element-style.jpg "Graph element style")

## Data Model [#](https://gudhub.com/uk/docs/gh-elements/graph/#data-model)

The graph data model contains only main element settings:

Копіювати

```json
{
    "data_model": {
        "dateField": "678889",
        "groupItemsByRange": "month",
        "groups": [{
            "color": "#5e3987",
            "filters_list": [],
            "name": "Group Name"
        }],
        "height": "800",
        "initialXAxisRange": {
            "end": 1650488437784,
            "start": 1649883633326
        },
        "interpretation": [],
        "source_app_id": "28752",
        "sumByField": "679043"
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| dateField | `string` | _contains ID of the date field_ |
| groupItemsByRange | `string` | _contains value by which items in graph will be grouped_ |
| groups | `array` | _contains all element groups and their settings_ |
| color | `string` | _contains hex code of the color of the group_ |
| filters\_list | `array` | _contains filters that determine which items belong to this group_ |
| name | `string` | _contains the name of the group_ |
| height | `string` | _contains value of the graph height_ |
| initialXAxisRange | `object` | _contains data about the time limits of the lower scale which will be displayed in the element_ |
| end | `number` | _contains value of the limit start; date in milliseconds_ |
| start | `number` | _contains value of the limit end; date in milliseconds_ |
| interpretation | `array` | _contains all element interpretation types_ |
| source\_app\_id | `string` | _contains ID of the source application_ |
| sumByField | `string` | _contains the identifier of the field by which the items will be summed up_ |

## Filtration [#](https://gudhub.com/uk/docs/gh-elements/graph/#filtration)

This element cannot be filtered out.

## Interpretation [#](https://gudhub.com/uk/docs/gh-elements/graph/#interpretation)

The graph has only one type of interpretation by default. It displays the customized graph.

![Types of graph interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/graph-interpretation-types.jpg "Graph interpretation types")