SVG-grafer i PHP uden JavaScript

Nogle af de PHP-projekter jeg har arbejdet på, har på et tidspunkt haft brug for en graf. En linjegraf over salgsdata, et søjlediagram over besøg, en donut-chart til rapporter.

Og løsningen er næsten altid den samme: find et JavaScript-bibliotek, sæt et div-element i skabelonen, og send data fra serveren ned til browseren - som så renderer grafen.

Det er ikke fordi det er svært. Men det fik mig til at tænke: hvad kan man egentlig opnå uden JavaScript i dag?

SVG er bare markup

En graf er ikke særlig avanceret. Det er linjer, kurver og tekst. SVG er præcis det - vektorgrafik beskrevet som markup. Og markup kan man generere i PHP.

Så det er det, SVGraph gør:

1echo Chart::line([
2    ['man', 12], ['tir', 27], ['ons', 18], ['tor', 41],
3])->theme(Theme::dark())->axes()->grid()->smooth()->stroke('#3b82f6');

Det returnerer HTML-markup med en SVG indlejret. Du putter den ind i din Blade- eller Twig-skabelon ligesom al anden HTML. Ingen script-tags. Intet build-step.

Hvad med interaktivitet?

Det første spørgsmål de fleste stiller er: “Men du kan vel ikke lave tooltips uden JavaScript?”

Det kan man faktisk. CSS er kommet langt.

SVGraph implementerer tooltips som absolut-positionerede HTML-elementer der aktiveres via CSS :has(). Når man hover over et datapunkt, tænder den tilhørende tooltip - ingen JavaScript involveret. Det eneste, der kræver en kreativ løsning, er seriesynlighed i en legend - det løser SVGraph med et CSS checkbox-trick.

Er det ligeså fleksibelt som Chart.js? Nej. Men for langt de fleste ting - en graf i en rapport, et dashboard der skal cache godt - er det rigeligt.

Tilgængelighed

SVG-tilgængelighed er et roderi. Specifikationen har ARIA-roller til grafer, men browser- og skærmlæserimplementationerne er inkonsistente og dårligt dokumenterede.

SVGraph løser det pragmatisk: hvert diagram får <title> og <desc> med aria-labelledby og aria-describedby, datapunkter har tabindex="0" til keyboard-navigation, og ved siden af SVG’en genereres en skjult <table> med rå data som fallback. Uanset hvad skærmlæseren gør med SVG-semantikken, er tabellen der og virker.

Hvad er der i det?

SVGraph er i early access. Det håndterer de mest almindelige diagramtyper - linje (med valgfri areaudfyldning), søjle, pie, donut, sparkline og progress. Multi-serier, grupperede og stablede layouts virker. Ingen runtime-afhængigheder.

Det er ikke Chart.js. Det prøver ikke at være Chart.js. Men hvis du sidder i et PHP-projekt og er nysgerrig på, hvad man kan opnå server-side i dag, kan det være det er det, du mangler.

Kildekoden ligger på GitHub. MIT-licens.