ondrej-vrto/php-linechart

Generates a simple line chart in SVG format using PHP.

1.1.1 2024-05-26 14:55 UTC

Requires

• php: ^8.1
• illuminate/collections: ^9.0|^10.0|^11.0
• ramsey/uuid: ^4.7
• spatie/color: ^1.5

Requires (Dev)

• laravel/pint: ^1.2
• pestphp/pest: ^1.20
• phpstan/phpstan: ^1.9
• rector/rector: ^0.15.7

MIT

• Ondrej Vrťo

• color
• svg
• line chart
• ondrej vrto
• line graph

README

Generates a simple line chart in SVG format using PHP

Installation

You can install the package via composer:

composer require ondrej-vrto/php-linechart

Usage

$data = [0, 2, 1, 3, 3, 2, 1, 5, 4];

$svg = LineChart::new($data)->make();

Creates the following svg string

<svg viewBox="0 0 200 30" width="200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient x2="0" y1="1" id="color-44dac552-0a1b-4b31-9c35-8bda05443b6f">
            <stop stop-color="#fbd808" offset="0"></stop>
            <stop stop-color="#ff9005" offset="0.34"></stop>
            <stop stop-color="#f9530b" offset="0.67"></stop>
            <stop stop-color="#ff0000" offset="1"></stop>
        </linearGradient>
        <mask id="linechart-44dac552-0a1b-4b31-9c35-8bda05443b6f">
            <polyline
                stroke="#fff"
                stroke-width="2"
                fill="transparent"
                stroke-linecap="round"
                stroke-linejoin="round"
                vector-effect="non-scaling-stroke"
                transform="scale(24.75 -5.6) translate(0.0404 -5.1786)"
                points="0 0 1 2 2 1 3 3 4 3 5 2 6 1 7 5 8 4">
            </polyline>
        </mask>
    </defs>
    <g>
        <rect
            width="200"
            height="30"
            fill="url(#color-44dac552-0a1b-4b31-9c35-8bda05443b6f)"
            mask="url(#linechart-44dac552-0a1b-4b31-9c35-8bda05443b6f)"
        />
    </g>
</svg>

The generated svg looks like this.

Input data types

$data = [0, 1, 2, 3];          // integers
$data = [0.12, 1.5555, 5.4];   // decimal numbers
$data = [true, false, true];   // booleans
$data = ["0", "002", "4.05"];  // numbers in string
$data = collect([0, 1, 2, 3]); // Illuminate\Support\Collection from Laravel
$data = [5];                   // one value => prepend zero value
$data = [];                    // empty array => set two zero value
$data = [null];                // null => set two zero value

It is possible to use the spread operator and insert values individually.

$svg = LineChart::new(0, 1, 2, 3, 4, 5)->make();

Example data from Laravel Eloquent query.

$collection = WebVisits::query()
    ->select(['day_visit_count'])
    ->whereMorphedTo('visitable', $model)
    ->orderByDesc('date')
    ->limit(365)
    ->get()
    ->pluck('day_visit_count');

$svg = LineChart::new($collection)->make();

Customization

$svg = LineChart::new($data)
    ->withStrokeWidth(5)
    ->withOrderReversed()
    ->withMaxItemAmount(50)
    ->withLockYAxisRange(200)
    ->withDimensions(500, 100)
    ->withColorGradient('Green', 'Orange', 'Red')
    ->make();

• withStrokeWidth will determine the stroke's width
• withOrderReversed reverses the order of values
• withMaxItemAmount will determine how many values will be shown. If you originally passed on more values than this max, then the oldest ones will be omitted. If the max amount is set to a number that's higher than the current amount, then the graph will extended.
• withLockYAxisRange sets the maximum value of the vertical axis. This is useful if you have multiple charts that should have the same length vertical scale. By default, the maximum value is determined based on the input values.
• withDimensions will determine the width and height of the rendered SVG
• withColorGradient you can choose any number of colors. A gradient for the graph is automatically generated from them.

Possible color value types for method withColorGradient()

    text   :  Blue, Orange, Cyan, ...
    hex    :  #0000ff, #eee, ...
    rgb    :  rgb(0, 0, 255)
    rgba   :  rgba(0, 0, 255, 1.0)
    hsl    :  hsl(240, 100%, 50%)
    hsla   :  hsla(240, 100%, 50%, 1.0)
    cmyk   :  cmyk(100%,100%,0%,0%)
    xyz    :  xyz(18.05, 7.22, 95.05)
    hsb    :  hsb(241, 100%, 50%)
    CIELab :  CIELab(32.3, 79.2, -107.86)

Color gradien example:

$svg = LineChart::new($data)
    ->withColorGradient('rgb(48, 231, 237)', 'rgb(0, 166, 215)', 'rgb(0, 88, 179)', 'rgb(0, 27, 135)')
    ->make();

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Ondrej Vrťo
• All Contributors

Alternatives

• brendt/php-sparkline

License

The MIT License (MIT). Please see License File for more information.