Line

@php
    $traffic = [
        ['month' => 'Jan', 'desktop' => 186, 'mobile' => 80],
        ['month' => 'Feb', 'desktop' => 305, 'mobile' => 200],
        ['month' => 'Mar', 'desktop' => 237, 'mobile' => 120],
        ['month' => 'Apr', 'desktop' => 73, 'mobile' => 190],
        ['month' => 'May', 'desktop' => 209, 'mobile' => 130],
        ['month' => 'Jun', 'desktop' => 214, 'mobile' => 140],
    ];
@endphp

<x-ui.echart type="line" :data="$traffic" index="month" label="Traffic by device" class="h-72 w-full" :config="[
    'desktop' => ['label' => 'Desktop'],
    'mobile' => ['label' => 'Mobile'],
]" />

@php
    // One year of daily sessions. In an app: a query grouped by day.
    $days = collect(range(0, 364))->map(fn (int $i) => [
        'date' => now()->startOfYear()->addDays($i)->format('Y-m-d'),
        'sessions' => (int) round(1400 + $i * 2.4 + sin($i / 14) * 220 + sin($i / 3.1) * 60),
    ])->all();
@endphp

<x-ui.echart type="area" datetime zoom :data="$days" index="date" label="Daily sessions" class="h-80 w-full"
    :config="['sessions' => ['label' => 'Sessions']]" />

@php
    // 10,000 points: rendered on canvas, sampled so the line keeps its shape.
    $readings = collect(range(0, 9999))->map(fn (int $i) => [
        'at' => date('Y-m-d\TH:i', 1790000000 + $i * 60),
        'load' => round(40 + 18 * sin($i / 180) + 9 * sin($i / 23) + ($i % 997 === 0 ? 30 : 0), 1),
    ])->all();
@endphp

<x-ui.echart type="line" datetime zoom :data="$readings" index="at" suffix="%" format="number" label="CPU load, last 7 days"
    class="h-80 w-full" :config="['load' => ['label' => 'CPU load']]" />