> For the complete documentation index, see [llms.txt](https://www.globadge.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.globadge.com/charts/stacked-area.md). # 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 ```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": "#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: ```xml ... ``` ![Sample Stacked Area chart SVG](/files/0GIjJKeFUE0ASMjl71GF) 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` ```json { "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 ```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": "#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: ```json { "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` ```json { "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 } ] } ] } ```