# Line Chart

## Time Series Line Chart

### Generate Chart

Generates time series line chart from given time series points.

#### URL&#x20;

`https://api.globadge.com/v1/chartgen/line/time`

#### Method

`POST`

#### Request

```json
{
    "options": {
        // [Optional] Width of the chart. 
        // Min value is "200" and default value is "650"
    	"width": 1000, .
        // [Optional] Heigth of the chart. 
        // Min value is "150" and default value is "400".
        "height": 500, 
        // [Optional] X axis configs.
        "xAxis": {
            // [Optional] X axis label
            "label": "Time",
            // [Optional] X axis (axis line, ticks, label) color
            "color": "#4daf4a"
        },
        // [Optional] Y axis configs.
        "yAxis": {
            // [Optional] Y axis label
            "label": "Network I/O (KB)",
            // [Optional] Y axis (axis line, ticks, label) color
            "color": "#ff7f00"
        },
        // [Mandatory] Time ticks.
        "timeTicks": {
                // [Mandatory] Time tick unit. 
                // Valid values are: 
                //     - "auto" (sets "interval" and "format" adaptively according to data points and chart width)
                //     - "year"
                //     - "month"
                //     - "week"
                //     - "day"
                //     - "hour"
                //     - "minute"
                //     - "second"
                //     - "millisecond" 
        	"unit": "day",
                // [Optional] Time tick interval. 
                // Min value is "1" and default value is "1".
                // When "unit" property is specified as "auto", 
                // this configuration is ignored even though it is specified. 
                "interval": 7,
                // [Optional] Time tick format. 
                // Some example supported specifiers are:
                //     - %Y: Year
                //     - %m: Month
                //     - %d: Day
                //     - %H: Hour
                //     - %S: Second
                // See "https://github.com/d3/d3-time-format" for more details. 
                // When "unit" property is specified as "auto", 
                // this configuration is ignored even though it is specified. 
        	"format": "%d/%m"
        }	
    },
    // [Mandatory] Lines. 
    // There can be 9 lines at most.
    "lines": [
        {
            // [Optional] Line label
            "label": "Read",
            // [Optional] Line color
            "color": "#be4d25",
            // [Mandatory] Points
            "points": [
                {
                    // [Mandatory] Time of the point as UNIX epoch timestamp. 
                    "x": 788911200000,
                    // [Mandatory] Value of the point.
                    // Min value is "0". Negative values are not supported.
                    "y": 1
                },
                {
                    "x": 791503200000,
                    "y": 2
                },
                {
                    "x": 794095200000,
                    "y": 3
                }
            ]
        },
        {
            "label": "Write",
            "color": "#6c25be",
            "points": [
                {
                    "x": 788911200000,
                    "y": 10
                },
                {
                    "x": 791503200000,
                    "y": 20
                },
                {
                    "x": 794095200000,
                    "y": 30
                }
            ]
        }
    ] 
}
```

#### Response

Returns generated chart SVG content in the response body:

```xml
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="500">
    ...
</svg>
```

![Sample Line chart SVG](/files/pJVz2iu9QcjojMjEBStJ)

The following example shows body of an example request to generate time series line chart.

#### URL&#x20;

`https://api.globadge.com/v1/chartgen/line/time`

#### Method

`POST`

```json
{
    "options": {
    	"width": 1000,
    	"height": 500,
        "xAxis": {
            "label": "Time",
            "color": "#4daf4a"
        },
        "yAxis": {
            "label": "Network I/O (KB)",
            "color": "#ff7f00"
        },
        "timeTicks": {
        	"unit": "day",
        	"interval": 7,
        	"format": "%d/%m"
        }	
    },
    "lines": [
        {
            "label": "Read",
            "color": "#be4d25",
            "points": [
                {
                    "x": 788911200000,
                    "y": 1
                },
                {
                    "x": 791503200000,
                    "y": 2
                },
                {
                    "x": 794095200000,
                    "y": 3
                }
            ]
        },
        {
            "label": "Write",
            "color": "#6c25be",
            "points": [
                {
                    "x": 788911200000,
                    "y": 10
                },
                {
                    "x": 791503200000,
                    "y": 20
                },
                {
                    "x": 794095200000,
                    "y": 30
                }
            ]
        }
    ] 
}
```

### Generate and Host Chart

Generates time series line chart from given time series points and returns a link to access hosted chart.

#### URL&#x20;

`https://api.globadge.com/v1/chartgen/line/time`

#### Method

`PUT`

#### Request

```json
{
    "options": {
        // [Optional] Width of the chart. 
        // Min value is "200" and default value is "650"
    	"width": 1000, .
        // [Optional] Heigth of the chart. 
        // Min value is "150" and default value is "400".
        "height": 500, 
        // [Optional] X axis configs.
        "xAxis": {
            // [Optional] X axis label
            "label": "Time",
            // [Optional] X axis (axis line, ticks, label) color
            "color": "#4daf4a"
        },
        // [Optional] Y axis configs.
        "yAxis": {
            // [Optional] Y axis label
            "label": "Network I/O (KB)",
            // [Optional] Y axis (axis line, ticks, label) color
            "color": "#ff7f00"
        },
        // [Mandatory] Time ticks.
        "timeTicks": {
                // [Mandatory] Time tick unit. 
                // Valid values are: 
                //     - "year",
                //     - "month"
                //     - "week"
                //     - "day"
                //     - "hour"
                //     - "minute"
                //     - "second"
                //     - "millisecond" 
        	"unit": "day",
                // [Optional] Time tick interval. 
                // Min value is "1" and default value is "1" 
                "interval": 7,
                // [Optional] Time tick format. 
                // Some example supported specifiers are:
                //     - %Y: Year
                //     - %m: Month
                //     - %d: Day
                //     - %H: Hour
                //     - %S: Second
                // See "https://github.com/d3/d3-time-format" for more details. 
        	"format": "%d/%m"
        }	
    },
    // [Mandatory] Lines. 
    // There can be 9 lines at most.
    "lines": [
        {
            // [Optional] Line label
            "label": "Read",
            // [Optional] Line color
            "color": "#be4d25",
            // [Mandatory] Points
            "points": [
                {
                    // [Mandatory] Time of the point as UNIX epoch timestamp. 
                    "x": 788911200000,
                    // [Mandatory] Value of the point.
                    // Min value is "0". Negative values are not supported.
                    "y": 1
                },
                {
                    "x": 791503200000,
                    "y": 2
                },
                {
                    "x": 794095200000,
                    "y": 3
                }
            ]
        },
        {
            "label": "Write",
            "color": "#6c25be",
            "points": [
                {
                    "x": 788911200000,
                    "y": 10
                },
                {
                    "x": 791503200000,
                    "y": 20
                },
                {
                    "x": 794095200000,
                    "y": 30
                }
            ]
        }
    ] 
}
```

#### Response

Returns id and the link for the hosted chart SVG content in the response body:

```json
{
    "id": "chart_line_time_efdeb1be-e7d2-40bf-90fc-6ab00482f04a",
    "url": "https://api.globadge.com/v1/chartgen/line/time/chart_line_time_efdeb1be-e7d2-40bf-90fc-6ab00482f04a"
}
```

Then you can use the provided `url` in the response body to access or embed hosted chart SVG content.

The following example shows body of an example request to generate hosted time series line chart.

#### URL&#x20;

`https://api.globadge.com/v1/chartgen/line/time`

#### Method

`PUT`

```json
{
    "options": {
    	"width": 1000,
    	"height": 500,
        "xAxis": {
            "label": "Time",
            "color": "#4daf4a"
        },
        "yAxis": {
            "label": "Network I/O (KB)",
            "color": "#ff7f00"
        },
        "timeTicks": {
        	"unit": "day",
        	"interval": 7,
        	"format": "%d/%m"
        }	
    },
    "lines": [
        {
            "label": "Read",
            "color": "#be4d25",
            "points": [
                {
                    "x": 788911200000,
                    "y": 1
                },
                {
                    "x": 791503200000,
                    "y": 2
                },
                {
                    "x": 794095200000,
                    "y": 3
                }
            ]
        },
        {
            "label": "Write",
            "color": "#6c25be",
            "points": [
                {
                    "x": 788911200000,
                    "y": 10
                },
                {
                    "x": 791503200000,
                    "y": 20
                },
                {
                    "x": 794095200000,
                    "y": 30
                }
            ]
        }
    ] 
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.globadge.com/charts/line-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
