# Charts

## Create Chart

<mark style="color:green;">`POST`</mark> `https://api.appmixer.com/charts`

This method is not meant to be implemented by applications embedding Appmixer SDK. Creating chart requires complex objects (options, query, traces), their structure goes beyond this documentation. `appmixer.ui.InsightsChartEditor` SDK component should be used to build Charts.

#### Request Body

| Name    | Type   | Description                                                                                      |
| ------- | ------ | ------------------------------------------------------------------------------------------------ |
| traces  | object | The aggregations that are represented on the chart along with their sources (flows, components). |
| query   | object | Object representing time range for the chart.                                                    |
| options | object | Object with the visualization options for the chart.                                             |
| index   | number | The position of the chart in the dashboard.                                                      |
| type    | string | Type of the chart. `bar, line, scatter, area, pie`                                               |
| name    | string | Name of the chart.                                                                               |

{% tabs %}
{% tab title="200 " %}

```
{
    chartId: '5defb3901f17d98d974fbb00'
}
```

{% endtab %}
{% endtabs %}

```javascript
{
    "name":"Test create chart",
    "index":1,
    "type":"bar",
    "options":{
        "layout":{
            "showlegend":true,
            "xaxis":{
                "showline":true
            },
            "yaxis":{
                "showline":false
            },
            "barmode":"group",
            "bargap":0.2,
            "bargroupgap":0.1
        },
        "showgrid":true,
        "showticklabels":true,
        "horizontal":false
    },
    "query":{
        "range":{
            "from":{
                "endOf":null,
                "startOf":"day",
                "subtract":[7,"day"]
            },
            "to":{}
        }
    },
    "traces":{
        "2f985875-4149-4c7b-a4ab-e204269c0c0f":{
            "name":"Trace 1",
            "hidden":false,
            "agg":{
                "date_histogram":{
                    "interval":"1d",
                    "min_doc_count":"0",
                    "field":"@timestamp"
                }
            },
            "options":{
                "type":"bar",
                "linewidth":0,
                "opacity":1
            },
            "source":{
                "type":"flow",
                "targets":{
                    "dbd206a4-23b3-44a4-a6c4-59db74aa3fb5":[]
                }
            }
        }
    }
}
```

## Update Chart

<mark style="color:orange;">`PUT`</mark> `https://api.appmixer.com/charts/:chartId`

The same properties as in Create Chart API endpoint.

#### Path Parameters

| Name | Type   | Description |
| ---- | ------ | ----------- |
|      | string |             |

{% tabs %}
{% tab title="200 " %}

```
{
    chartId: "5defa30cbd1ca06288202346"
    index: 1
    mtime: "2019-12-10T13:52:12.288Z"
    name: "Updated Chart"
    options: {,…}
    query: {,…}
    traces: {,…}
    type: "bar"
    userId: "5dee76c19462fe6b3fd42d79"   
}
```

{% endtab %}
{% endtabs %}

## Get Charts

<mark style="color:blue;">`GET`</mark> `https://api.appmixer.com/charts`

Get a list of all charts the user has configured in their Insights Dashboard.

#### Query Parameters

| Name       | Type   | Description                                                                                                                          |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| pattern    | string | Regex that will be used to match `name` property.                                                                                    |
| limit      | number | Maximum items returned. Default is 100. Used for paging.                                                                             |
| offset     | number | The index of the first item returned. Default is 0. Used for  for paging.                                                            |
| sort       | string | Sorting parameter. Can be any chart object property followed by semicolon and 1 (ascending) or -1 (descending). Example: "mtime:-1". |
| projection | string | Exclude chart object properties. Example: "-traces".                                                                                 |

{% tabs %}
{% tab title="200 Charts successfully retrieved." %}

```
[
    {
        "chartId": "5defa30cbd1ca06288202346",
        "userId": "5dee76c19462fe6b3fd42d79",
        "name": Chart 1",
        "index": 0,
        "type": "bar",
        "query": { ... },
        "options": { ... },
        "traces": { ... },
        "mtime": "2019-12-10T13:52:12.288Z"
    },
    {
        "chartId": "5defa30cbd1ca06288202347",
        "userId": "5dee76c19462fe6b3fd42d79",
        "name": Chart 2",
        "index": 0,
        "type": "bar",
        "query": { ... },
        "options": { ... },
        "traces": { ... },
        "mtime": "2019-13-10T13:52:12.288Z"
    }
]
```

{% endtab %}
{% endtabs %}

## Get One Chart

<mark style="color:blue;">`GET`</mark> `https://api.appmixer.com/charts/:id`

#### Path Parameters

| Name | Type   | Description                |
| ---- | ------ | -------------------------- |
| id   | string | ID of the chart to return. |

{% tabs %}
{% tab title="200 " %}

```
{
        "chartId": "5defa30cbd1ca06288202346",
        "userId": "5dee76c19462fe6b3fd42d79",
        "name": Chart 1",
        "index": 0,
        "type": "bar",
        "query": { ... },
        "options": { ... },
        "traces": { ... },
        "mtime": "2019-12-10T13:52:12.288Z"
}
```

{% endtab %}
{% endtabs %}

## Delete a Chart

<mark style="color:red;">`DELETE`</mark> `https://api.appmixer.com/charts/:id`

#### Path Parameters

| Name | Type   | Description    |
| ---- | ------ | -------------- |
| id   | string | ID of a chart. |

{% tabs %}
{% tab title="200 " %}

```
```

{% endtab %}
{% endtabs %}