Introducing: Donut & Pie charts for Kirby v3

Plugins Kirby 3 plugin 🧩
1

Hey there,
it’s been a while, but recently I published a tiny plugin for creating donut (and pie) charts. The underlying library is a PHP port of a neat little TypeScript module called tiny-donuts, see here.

I didn’t want to ‘force’ the build process on the users, but simply create everything server-side (leveraging Kirby’s media system, as well). So far there’s a field method, aiming at structure fields (as long as there’s a color and a value attribute) and a page method, using an array of associate arrays (again, containing at least color information and a value between 0 and 1), both are called toDonut(). Improving its documentation would be one of many tasks, but …

It’s still ‘pre-release’ in a way, quick and dirty, but suits my needs for now - and maybe yours, as well. Any kind of feedback welcome, as always. Love the Kirby community,

cheers
S1SYPHOS

2 Likes
2

i left some comments. i suggest you use version bigger than 1.0.0 to make live easier with composer even if its a pre-release kind of state… see issues.

3

I improved the project’s README to include everything to get you started and released it as v1.0.0:

How

Install this package with Composer:

composer require fundevogel/kirby3-donuts

Usage

In order to generate a chart, we need some data first. The page method toDonut() accepts an array of data points as first argument - basically two or more arrays, each of which consists of color (string) and value (float):

$data = [
    ['color' => '#4F5D95', 'value' => 0.6],
    ['color' => '#2b7489', 'value' => 0.4],
];

$page->doDonut($data);

There’s also a field method toDonut() which takes color and value from a structure field. A basic example blueprint fields/donut (to be extended in your blueprint) looks like that:

type: structure
fields:
  title:
    label:
      en: Title
      de: Titel
    type: text
    width: 1/2

  value:
    label:
      en: Value
      de: Wert
    type: number
    min: 0
    max: 1
    step: .01
    width: 1/4

  color:
    label:
      en: Color
      de: Farbe
    type: text
    width: 1/4

Both methods return a file object of the newly created SVG chart for further use.

Options

You may want to …

  • change the thickness of the chart
  • the spacing between the segments
  • add classes to the output SVG element
  • make it a pie chart

… here’s how:

$page->doDonut($data, $thickness, $spacing, $classes, $isPieChart);
Parameter Type Default Description
$data array - data to be visualized
$thickness float see below thickness of the chart
$spacing float see below spacing between the segments
$classes string '' classes applied to chart
$isPieChart bool false make it a pie chart

Attention: The field methods omits the $data argument (which is gathered from the structure field).

Configuration

You may also change certain options from your config.php globally ('fundevogel.donuts.optionName'):

Option Type Default Description
'thickness' float 3 global default thickness
'spacing' float 0.005 global default spacing
'size' int 100 viewBox width & height
'inline' bool false output inline SVG directly
'template' string 'donut' chart file template

Example

Adding some data points, it looks like this:

chart

… and with $isPieChart being true:

chart2

Thanks for Kirby software and forum support,

S1SYPHOS

3 Likes
4

Hello
Could anyone make a zip file for this plugin that we can just copy the files into mamp installation? I really don’t know how to install composer. Please?

5

I‘m on it! :wink:

1 Like
6

I’m melting wainting for it
no preasure :slight_smile:

7

Hey there,
I added the dependencies, they should be included in the Github package, for download here:

1 Like
8

Thank you Mister!

So, I copied the files from the archive in the site/pluggins/kirby3-donuts folder

In the page.php template:

<?php $data = [ ['color' => '#4F5D95', 'value' => 0.6], ['color' => '#2b7489', 'value' => 0.4], ]; $page->doDonut($data); ?>

But nothing happens. I’m am pretty sure that I do something (or maybe everything) wrong, but I don’t know what.

9

It’s toDonut, not doDonut

10

Otherwise, it would be makeDonut, which I would really like :wink:

1 Like
11

Good one S1SYPHOS :)))

I just c/p from the github page, there is doDonut :slight_smile:
Anyway, nothing happens with toDonut($data) aswell

12

Is this the same with a fresh starter kit?

13

No, I bought the thinking theme from the theme site.
I noticed that the script created a svg file and a text file in the content folder of the page. Maybe I have to display it some how

14

echo it :wink:

See it in action here, Line 51: fundevogel.de/dependencies.php at master · fundevogel/fundevogel.de · GitHub