diff --git a/content/docs/platform/chart-editor/chart-types/area.mdx b/content/docs/platform/chart-editor/chart-types/area.mdx new file mode 100644 index 0000000..e3d5a10 --- /dev/null +++ b/content/docs/platform/chart-editor/chart-types/area.mdx @@ -0,0 +1,27 @@ +--- +title: Area +description: Show how values change over time with the volume filled in +icon: ChartArea +--- + +An area chart works like a [line chart](/platform/chart-editor/chart-types/line), but fills the space below each line. It makes volume easier to see, for example total traffic over a month. + +![Area chart of Servers and Players over a week](/images/chart-editor/chart-types/area.png) + +## Building an area chart + +Build it the same way as a line chart: + +- **Easy mode:** set **Show** to an interval. Each series, or each group of a **Breakdown**, becomes an area. +- **Canvas mode:** add a **Time Group** node to each pipeline. Each Output node becomes an area. + +**Running total** works the same as on line charts. + +## Display options + +| Option | Default | Description | +| ----------------- | -------- | --------------------------------------------------------------- | +| Logarithmic Scale | Off | Spaces the value axis by orders of magnitude | +| Line Style | Monotone | **Monotone** (smooth), **Linear** (straight lines), or **Step** | + +Area charts also support [Values](/platform/chart-editor/chart-types#values) settings and [Event markers](/platform/chart-editor/chart-types#event-markers). diff --git a/content/docs/platform/chart-editor/chart-types/bar.mdx b/content/docs/platform/chart-editor/chart-types/bar.mdx new file mode 100644 index 0000000..5ae6a61 --- /dev/null +++ b/content/docs/platform/chart-editor/chart-types/bar.mdx @@ -0,0 +1,26 @@ +--- +title: Bar +description: Compare values over time or between groups +icon: ChartColumn +--- + +A bar chart compares values, either over time (one bar per day, for example) or between groups (one bar per version or platform). + +![Stacked bar chart of worlds per server over a week, broken down into four groups](/images/chart-editor/chart-types/bar-stacked.png) + +## Building a bar chart + +- **Over time:** in Easy mode, set **Show** to an interval. In Canvas mode, add a **Time Group** node. +- **By group:** in Easy mode, leave **Show** on **Total** and pick a **Breakdown**. In Canvas mode, add a **Group By** node. + +Add more series (or Output nodes) to show several values per bar. See [Stacked bar charts](/platform/chart-editor/output-nodes#stacked-bar-charts). + +## Display options + +| Option | Default | Description | +| ----------------- | -------- | ---------------------------------------------------------------------- | +| Logarithmic Scale | Off | Spaces the value axis by orders of magnitude | +| Orientation | Vertical | **Vertical** bars, or **Horizontal** bars for long group names | +| Stack Series | On | On: series are stacked in each bar. Off: series are drawn side by side | + +Bar charts also support [Values](/platform/chart-editor/chart-types#values) settings (unit, decimals, axis range, thresholds). diff --git a/content/docs/platform/chart-editor/chart-types/heatmap.mdx b/content/docs/platform/chart-editor/chart-types/heatmap.mdx new file mode 100644 index 0000000..2fc7944 --- /dev/null +++ b/content/docs/platform/chart-editor/chart-types/heatmap.mdx @@ -0,0 +1,30 @@ +--- +title: Heatmap +description: Show intensity in a grid, like activity by hour and day +icon: Grid3x3 +--- + +A heatmap colors each cell by its value, from quiet to busy. It's useful for spotting patterns, like the busiest hours of the week. + +![Calendar heatmap of hourly server activity, with one column per day and one row per hour](/images/chart-editor/chart-types/heatmap-calendar.png) + +## Layouts + +The heatmap picks its layout from the shape of your data: + +| Layout | Easy mode | Canvas mode | +| ---------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------- | +| **Calendar:** one column per day, one row per hour | One series, **Show** set to **Hour**, over a time range of several days | One pipeline with a **Time Group** node set to hours | +| **Grid:** one row per series, one column per group | Several series, a **Breakdown**, and **Show** on **Total** | Several Output nodes, each with a **Group By** node on the same field | +| **Grid:** the first field is the rows, the second is the columns | — | A **Group By** node with two fields | +| **Mosaic:** one tile per group | One series, a **Breakdown**, and **Show** on **Total** | One pipeline with a **Group By** node on one field | + +![Mosaic heatmap with one tile per operating system and a tooltip on Windows 11](/images/chart-editor/chart-types/heatmap-mosaic.png) + +In grid layouts, empty rows and columns are hidden and the busiest rows are shown first. Hover a cell to see its exact value. + +## Display options + +| Option | Default | Description | +| ----------- | ------- | ---------------------------------------------- | +| Show Legend | On | Shows a color scale from **Quiet** to **Busy** | diff --git a/content/docs/platform/chart-editor/chart-types/index.mdx b/content/docs/platform/chart-editor/chart-types/index.mdx new file mode 100644 index 0000000..88649da --- /dev/null +++ b/content/docs/platform/chart-editor/chart-types/index.mdx @@ -0,0 +1,76 @@ +--- +title: Overview +description: Every chart type in FastStats and when to use it +icon: Shapes +--- + +Pick the chart type in the chart editor, next to the preview. You can change it at any time, and the same data is drawn in the new style. + +## Choosing a chart type + +| Chart type | Best for | +| ----------------------------------------------------- | --------------------------------------------------------- | +| [Widget](/platform/chart-editor/chart-types/widget) | One or more headline numbers with a trend | +| [Line](/platform/chart-editor/chart-types/line) | Trends over time | +| [Area](/platform/chart-editor/chart-types/area) | Trends over time, with the volume filled in | +| [Bar](/platform/chart-editor/chart-types/bar) | Comparing values over time or by group | +| [Pie](/platform/chart-editor/chart-types/pie) | How a total splits into a few groups | +| [List](/platform/chart-editor/chart-types/list) | Ranked values, like top pages or versions | +| [Table](/platform/chart-editor/chart-types/table) | Several metrics side by side for each group | +| [Map](/platform/chart-editor/chart-types/map) | Values per country | +| [Treemap](/platform/chart-editor/chart-types/treemap) | Share of a total, as rectangles sized by value | +| [Heatmap](/platform/chart-editor/chart-types/heatmap) | Activity by hour and day, or across two groupings | +| [Radar](/platform/chart-editor/chart-types/radar) | Comparing series across several categories at once | +| [Scatter](/platform/chart-editor/chart-types/scatter) | Values plotted against a numeric grouping like Core Count | + +## Over time or as a total + +Some chart types plot values over time, others show one value per group. + +- **Line** and **area** charts always use a time interval. In Easy mode, switching to one of them sets **Show** to **Auto**. +- **Pie**, **list**, **map**, and **treemap** charts always show a total per group. In Easy mode, switching to one of them sets **Show** to **Total**. +- **Bar**, **widget**, and **table** charts keep whatever you picked. + +In Canvas mode, a **Time Group** node puts a chart on a time axis, and a **Group By** node splits it into groups. + +## Shared options + +### Values + +Line, area, and bar charts have a **Values** section in the chart editor that controls how numbers are shown on the value axis and in tooltips. + +| Setting | Description | +| -------------- | --------------------------------------------------------------------------------------------------------- | +| Unit | Number, Percent (0–100), Percent (0–1), Duration (ms), Duration (s), Bytes, or a custom unit like `req/s` | +| Decimal places | **Auto**, or a fixed number from 0 to 4 | +| Axis range | A fixed minimum and maximum for the value axis. Leave empty to scale automatically | +| Thresholds | Up to 6 labeled lines at a value, like a goal, budget, or limit. Pick a color for each one | + +![The Values section with a Number unit, an axis range from 100 to 1000 and three thresholds](/images/chart-editor/chart-types/values-section.png) + +![Line chart with threshold lines at 250, 500 and 750](/images/chart-editor/chart-types/thresholds.png) + +### Event markers + +Line and area charts can show **Event Markers**: labeled points in time like launches, releases, or milestones. Turn on the marker collections you want under **Event Markers** in the chart editor. + +![Line chart with event markers and a tooltip for the v4.5.0 release from the GitHub releases collection](/images/chart-editor/chart-types/event-markers.png) + +### Legend + +Charts with more than one series show a legend. Click an entry to hide or show that series. Hold Shift or Alt while clicking to show only that series, and do it again to bring the others back. Hidden series are remembered in your browser. + +