tiny-phpeanuts

A tiny PHP library for creating SVG donut (and pie) charts.

What

This library is a PHP port of the TypeScript library tiny-donuts.

Why

We needed Donut charts - however, Chart.js was a much too powerful (and big) for our use case and added >200kb to our browser application.

So we wrote this small library with a minified size of 4 KiB.

While tiny-donuts is a great library, we needed something less client-side and more server-side.

So we ported their library to PHP.

How

Install this package with Composer:

composer require fundevogel/tiny-phpeanuts

Configuration

The Donut class takes three parameters:

Parameter	Type	Default	Description
$entries	array	-	data to be visualized
$thickness	float	see below	thickness of the chart
$spacing	float	see below	spacing between the segments

Options

.. and there's even more! Check out these 'global' options:

Setter	Type	Default	Description
setSize	int	100	dimensions of chart
setBackgroundColor	string	'transparent'	background fill color
setPreferViewbox	bool	true	viewBox > width & height
setClasses	string	''	classes applied to chart
setRole	string	'img'	role attribute
setPieChart	bool	false	make it a pie chart

Example

<?php

require_once('vendor/autoload.php');

use Fundevogel\Donut;

$donut = new Donut(
    [
        ['color' => '#4F5D95', 'value' => 0.68], # PHP
        ['color' => '#2b7489', 'value' => 0.25], # TypeScript
        ['color' => '#563d7c', 'value' => 0.04], # CSS
        ['color' => '#3572A5', 'value' => 0.02], # Python
        ['color' => '#89e051', 'value' => 0.01], # Shell
    ]
);

// .. maybe make it a pie chart?
$donut->setPieChart(true);

// Render its markup
$svg = $donut->render();

# Save it to disk ..
# (1) .. using the XML DOM parser
$dom = new DOMDocument;
$dom->preserveWhiteSpace = FALSE;
$dom->loadXML($svg);
$dom->save('dist/chart_xml-dom-parser.svg');

# (2) .. echoing its contents
header('Content-Type: image/svg+xml');
echo $svg;

# (3) .. or simply like this
file_put_contents('dist/chart_file-put-contents.svg', $svg);

.. looks like this:

.. and with setPieChart(true):

FAQ

Will there be more charts in the future?

PRs welcome, beyond that .. no.

Are you sure?

Yes! If you are looking for something more serious, have a look at easychart.

Roadmap

• Add tests
• Table view for options
• Optimizing code

Credits

This project is based on the TypeScript library tiny-donuts by Kim Almasan & Lars Krumbier. The helper functions (see lib/helpers) were taken from Kirby by Bastian Allgeier (both the project and its founder are just awesome, btw).

Happy coding!

©️ Fundevogel Kinder- und Jugendbuchhandlung