Stacked Area
Time Series Stacked Area Chart
Generate Chart
Generates time series stacked area chart from given time series points.
URL
https://api.globadge.com/v1/chartgen/stacked-area/time
Method
POST
Request
{
"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": "#984ea3"
},
// [Optional] Y axis configs.
"yAxis": {
// [Optional] Y axis label
"label": "Memory Usage (%)",
// [Optional] Y axis (axis line, ticks, label) color
"color": "#377eb8"
},
// [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] Areas.
// There can be 9 areas at most.
"areas": [
{
// [Optional] Area label
"label": "User",
// [Optional] Area color
"color": "#e41a1c99",
// [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": "System",
"color": "#ff7f0099",
"points": [
{
"x": 788911200000,
"y": 10
},
{
"x": 791503200000,
"y": 20
},
{
"x": 794095200000,
"y": 30
}
]
}
]
}Response
Returns generated chart SVG content in the response body:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="500">
...
</svg>The following example shows body of an example request to generate time series stacked area chart.
URL
https://api.globadge.com/v1/chartgen/stacked-area/time
Method
POST
{
"options": {
"width": 1000,
"height": 500,
"xAxis": {
"label": "Time",
"color": "#984ea3"
},
"yAxis": {
"label": "Memory Usage (%)",
"color": "#377eb8"
},
"timeTicks": {
"unit": "day",
"interval": 7,
"format": "%d/%m"
}
},
"areas": [
{
"label": "User",
"color": "#e41a1c99",
"points": [
{
"x": 788911200000,
"y": 1
},
{
"x": 791503200000,
"y": 2
},
{
"x": 794095200000,
"y": 3
}
]
},
{
"label": "System",
"color": "#ff7f0099",
"points": [
{
"x": 788911200000,
"y": 10
},
{
"x": 791503200000,
"y": 20
},
{
"x": 794095200000,
"y": 30
}
]
}
]
}Generate and Host Chart
Generates time series stacked area chart from given time series points and returns a link to access hosted chart.
URL
https://api.globadge.com/v1/chartgen/stacked-area/time
Method
PUT
Request
{
"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": "#984ea3"
},
// [Optional] Y axis configs.
"yAxis": {
// [Optional] Y axis label
"label": "Memory Usage (%)",
// [Optional] Y axis (axis line, ticks, label) color
"color": "#377eb8"
},
// [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] Areas.
// There can be 9 areas at most.
"areas": [
{
// [Optional] Area label
"label": "User",
// [Optional] Area color
"color": "#e41a1c99",
// [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": "System",
"color": "#ff7f0099",
"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:
{
"id": "chart_stacked_area_time_efdeb1be-e7d2-40bf-90fc-6ab00482f04a",
"url": "https://api.globadge.com/v1/chartgen/stacked-area/time/chart_stacked_areas_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 stacked area chart.
URL
https://api.globadge.com/v1/chartgen/stacked-area/time
Method
PUT
{
"options": {
"width": 1000,
"height": 500,
"xAxis": {
"label": "Time",
"color": "#984ea3"
},
"yAxis": {
"label": "Memory Usage (%)",
"color": "#377eb8"
},
"timeTicks": {
"unit": "day",
"interval": 7,
"format": "%d/%m"
}
},
"areas": [
{
"label": "User",
"color": "#e41a1c99",
"points": [
{
"x": 788911200000,
"y": 1
},
{
"x": 791503200000,
"y": 2
},
{
"x": 794095200000,
"y": 3
}
]
},
{
"label": "System",
"color": "#ff7f0099",
"points": [
{
"x": 788911200000,
"y": 10
},
{
"x": 791503200000,
"y": 20
},
{
"x": 794095200000,
"y": 30
}
]
}
]
}Last updated
