Download the PHP package clesson-de/silverstripe-graphing without Composer
On this page you can find all versions of the php package clesson-de/silverstripe-graphing. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download clesson-de/silverstripe-graphing
More information about clesson-de/silverstripe-graphing
Files in clesson-de/silverstripe-graphing
Package silverstripe-graphing
Short Description Chart form fields for Silverstripe 6 CMS, rendered with Chart.js. Display-only — no data storage.
License BSD-3-Clause
Informations about the package silverstripe-graphing
silverstripe-graphing
Chart form fields for Silverstripe CMS 6, rendered with Chart.js. Display-only — no data storage.
Features
- Line charts — display line charts with configurable fill, tension and point styles
- Bar charts — display bar charts with stacking, horizontal mode and rounded corners
- Multi-series with time period switcher — provide multiple data series (e.g. "7 days", "30 days", "1 year") and let the user switch between them via buttons above the chart
- Stacked bars — show individual items as coloured blocks stacked on top of each other
- Display-only — chart fields do not save data to the database
- Chart.js powered — uses Chart.js 4 for beautiful, responsive, animated charts
- AJAX-safe — works with GridField detail forms, tab switching and dynamically loaded content
- Extensible — create custom chart types by extending the abstract
ChartFieldbase class - Lazy-loaded assets — Chart.js is only loaded when a chart field is actually rendered
Requirements
| Dependency | Version |
|---|---|
| PHP | ^8.1 |
| silverstripe/framework | ^6 |
| silverstripe/admin | ^3 |
Installation
Expose the frontend assets:
Then run a database build:
Usage
LineChartField
Add a line chart to any getCMSFields() method:
BarChartField
Add a bar chart:
Stacked bars
Enable stacking to show individual items as coloured blocks on top of each other. Each dataset becomes one block within the bar for its respective label:
This renders:
- 25 Mar: Two blocks stacked (EXP-001 + EXP-002)
- 26 Mar: One block (EXP-003)
- 27 Mar: Empty
Hover over a block to see its label and amount in the tooltip.
Multi-series (time period switcher)
Provide multiple data series as string-keyed top-level entries. Buttons are rendered above the chart so the user can switch between series.
The module automatically detects multi-series data (string keys that are not labels or datasets) and renders a row of toggle buttons.
Each series can have its own labels and datasets — the chart is completely replaced when switching.
You can set the initially active series:
Multi-series works with all chart types (LineChartField, BarChartField, PieChartField, etc.).
PieChartField
Add a pie chart:
Use setCutout('50%') to create a doughnut-style appearance with a hole in the centre.
Configuration options
Base options (all chart types)
| Method | Description | Default |
|---|---|---|
setData(array $data) |
Set chart data — single series or multi-series | [] |
setOptions(array $options) |
Set additional Chart.js options | [] |
setChartWidth(string $width) |
CSS width of the container | '100%' |
setChartHeight(string $height) |
CSS height of the container | '300px' |
setChartTitle(?string $title) |
Optional chart title | null |
setActiveSeries(?string $key) |
Initially active series key (multi-series only) | null (first) |
LineChartField options
| Method | Description | Default |
|---|---|---|
setFill(bool $fill) |
Fill area below the line | false |
setTension(float $tension) |
Line curve tension (0 = straight, 0.4 = smooth) | 0.0 |
setPointStyle(?string $style) |
Point style (e.g. 'circle', 'triangle', 'rect') |
null |
BarChartField options
| Method | Description | Default |
|---|---|---|
setStacked(bool $stacked) |
Stack bars on top of each other | false |
setHorizontal(bool $horizontal) |
Render bars horizontally | false |
setBorderRadius(?int $radius) |
Rounded bar corners in pixels | null |
setBarThickness(?int $thickness) |
Fixed bar thickness in pixels | null (auto) |
PieChartField options
| Method | Description | Default |
|---|---|---|
setCutout(?string $cutout) |
Cutout percentage ('0%' = full pie, '50%' = doughnut-style) |
null |
setBorderWidth(?int $width) |
Border width between segments in pixels | null |
setHoverOffset(?int $offset) |
Offset distance for the hovered segment in pixels | null |
Available chart types
| Class | Chart.js type | Description |
|---|---|---|
LineChartField |
line |
Line chart with optional area fill |
BarChartField |
bar |
Bar chart with stacking, horizontal mode and rounded corners |
PieChartField |
pie |
Pie chart with optional cutout (doughnut-style) |
More chart types (radar, doughnut, polar area) can be added by extending the ChartField base class.
Frontend assets
The module ships with compiled admin CSS and JS in client/admin/dist/.
If you want to modify the styles or scripts, you need to recompile them.
Prerequisites
The required Node.js version is defined in .nvmrc. Switch to it with:
Install dependencies
Build
This compiles:
client/admin/src/js/chart-field.js→client/admin/dist/bundle.js(includes Chart.js)client/admin/src/scss/chart-field.scss→client/admin/dist/bundle.css
Watch mode (during development)
Output files
The compiled files in client/admin/dist/ are exposed via composer vendor-expose
and referenced in PHP via Requirements::css() / Requirements::javascript().
Their filenames are static — they must not be renamed.
Developer documentation
Creating custom chart types
To add a new chart type, extend the abstract ChartField class and implement getChartType():
Override getChartConfig() to add type-specific dataset defaults:
Architecture
ChartField— abstract base class handling Chart.js configuration, multi-series detection, asset loading and template renderingLineChartField— concrete implementation for line charts with fill, tension and point styleBarChartField— concrete implementation for bar charts with stacking, horizontal mode and border radius- Entwine integration — jQuery Entwine ensures charts are initialized on AJAX-loaded content and destroyed on DOM removal
- Series switcher — when multi-series data is detected, toggle buttons are rendered above the chart; clicking a button swaps the chart data client-side without a page reload
- Chart.js — bundled via Rollup from
node_modulesinto a single IIFE; jQuery is marked as external (provided by Silverstripe Admin)
License
BSD-3-Clause — see LICENSE.