PHP code example of tmc1807 / laravel-tree-chart

1. Go to this page and download the library: Download tmc1807/laravel-tree-chart library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

tmc1807 / laravel-tree-chart example snippets


Tmc\LaravelTreeChart\TreeChartServiceProvider::class,


$nodes = [
    [
        'id'        => 'visi',
        'header'    => 'Visi',
        'label'     => 'Terwujudnya Masyarakat Sejahtera',
        'sub_label' => 'Periode 2025 - 2030',
        'photo'     => 'https://example.test/foto/kepala-daerah.jpg',
        'color'     => '#4e73df',
        'children'  => [
            [
                'id'        => 'm-1',
                'header'    => 'Misi 1',
                'label'     => 'Meningkatkan kualitas SDM',
                'sub_label' => 'Sasaran pembangunan manusia',
                'hideable'  => true,
                'children'  => [
                    [
                        'id'       => 't-1',
                        'header'   => 'Tujuan 1',
                        'label'    => 'Meningkatkan kualitas pendidikan',
                        'position' => 'side',
                        'side'     => view('partials.indicator', ['rows' => $indikatorRows]),
                        'children' => [
                            [
                                'id'    => 's-1',
                                'label' => 'Meningkatnya mutu layanan pendidikan',
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];


use Tmc\LaravelTreeChart\Data\Node;

$nodes = [
    Node::make('visi', 'Terwujudnya Masyarakat Sejahtera')
        ->header('Visi')
        ->color('#4e73df')
        ->photo('https://example.test/foto/visi.jpg')
        ->child(
            Node::make('m-1', 'Meningkatkan kualitas SDM')
                ->header('Misi 1')
                ->hideable()
        ),
];


$options = [
    'title'       => 'Cascading Bagan Kinerja RPJMD 2025 - 2030',
    'subtitle'    => 'Akhir periode',
    'colors'      => ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#6f42c1'], // per level (depth 0 = root)
    'card_width'  => 260,
    'card_gap'    => 14, // jarak horizontal antar kartu (px)
    'card_height' => null, // tinggi minimum kartu (px); null = mengikuti isi
    'font_size'   => 11, // ukuran font kartu (px); sub-label mengikuti secara proporsional
    'photo'       => true, // saklar utama: false menyembunyikan avatar bahkan jika node punya photo; node bisa override sendiri dengan 'photo' => false
    'photo_placeholder' => 'data:image/svg+xml,...', // fallback jika node tanpa photo; null menyembunyikan avatar
    'side_width'  => 500,
    'animate'     => true,
    'connector'   => 'dashed', // 'dashed' | 'solid'
    'collapsible' => true,
    'expand_level' => 'all', // 'all' (semua tampil) | 'click' (klik baru muncul) | 3 (auto sampai level 3)
    'side_toggle' => true,
    'scrollable'  => true,
];


// config/tree-chart.php (yang sudah dipublish) atau secara dinamis
'tree-chart.demo' => env('TREECHART_DEMO', false),