Daten bekommen Form.

Eigenständige Module für Tabellen und SVG-Diagramme. Alle Daten auf dieser Seite sind lokal und fiktiv.

Neu dabei? Rittek UI in HTML oder PHP einbinden

Dieses Grundgerüst funktioniert auch als .php-Datei. Setze das Beispiel-HTML in den Body. JavaScript-Beispiele kommen darunter in einen <script type="module">-Block. Bei einem eigenen Server ersetzt du /assets/ in den Imports durch https://ui.rittek.de/assets/ oder kopierst die Assets auf deinen Server. Die Demo-Navigation gehört nicht zum Framework.

HTML · Grundgerüst

<!doctype html>
<html lang="de" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Rittek-Seite</title>
  <link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
  <!-- Hier das HTML des gewünschten Beispiels einsetzen. -->
  <script src="https://ui.rittek.de/assets/rittek.js"></script>
  <!-- JavaScript aus dem Beispiel in einen script type="module"-Block einsetzen. -->
</body>
</html>

Projektübersicht

Klicke Spaltenüberschriften zum Sortieren. Die Auswahl bleibt beim Seitenwechsel erhalten. CSV exportiert ausgewählte sichtbare Treffer oder alle gefilterten Treffer.

Daten als Tabelle darstellen

Jede Zeile benötigt eine eindeutige ID. Die Spalten beschreiben, welche Eigenschaften angezeigt werden.

HTML

<div id="ex-basic-table"></div>

JavaScript · type="module"

import {createTable} from 'https://ui.rittek.de/assets/modules/table.js';
const table = createTable(document.getElementById('ex-basic-table'), {
  rows: [
    {id: 1, name: 'Website', pages: 12},
    {id: 2, name: 'Kundenportal', pages: 24}
  ],
  columns: [{key: 'name', label: 'Projekt'}, {key: 'pages', label: 'Seiten'}],
  caption: 'Beispielprojekte',
  pageSize: 5
});

Datensatz 1 · Beispielwerte

Ein Liniendiagramm

Dieses Beispiel erzeugt die dargestellten Plan- und Ist-Reihen. Die Legende schaltet einzelne Reihen um; eine zugängliche Datentabelle wird automatisch ergänzt.

HTML

<div class="r-card" id="ex-line-chart"></div>

JavaScript · type="module"

import {createChart} from 'https://ui.rittek.de/assets/modules/chart.js';
const chart = createChart(document.getElementById('ex-line-chart'), {
  "type": "line",
  "title": "Besuche pro Woche",
  "labels": [
    "Mo",
    "Di",
    "Mi",
    "Do",
    "Fr",
    "Sa",
    "So"
  ],
  "series": [
    {
      "id": "plan",
      "label": "Plan",
      "values": [
        16,
        20,
        22,
        28,
        30,
        36,
        40
      ]
    },
    {
      "id": "actual",
      "label": "Ist",
      "values": [
        12,
        18,
        15,
        30,
        24,
        42,
        38
      ]
    }
  ]
});

Ein Balkendiagramm

Dieses Beispiel erzeugt die dargestellten Plan- und Ist-Reihen. Die Legende schaltet einzelne Reihen um; eine zugängliche Datentabelle wird automatisch ergänzt.

HTML

<div class="r-card" id="ex-bar-chart"></div>

JavaScript · type="module"

import {createChart} from 'https://ui.rittek.de/assets/modules/chart.js';
const chart = createChart(document.getElementById('ex-bar-chart'), {
  "type": "bar",
  "title": "Änderung zum Vormonat",
  "labels": [
    "Web",
    "Portal",
    "Shop",
    "Intern"
  ],
  "series": [
    {
      "id": "plan",
      "label": "Plan",
      "values": [
        20,
        -5,
        30,
        18
      ]
    },
    {
      "id": "actual",
      "label": "Ist",
      "values": [
        24,
        -12,
        38,
        15
      ]
    }
  ]
});

Ein Donutdiagramm

labels benennt die Werte. Beide Arrays müssen gleich lang sein. Das Modul erzeugt auch eine zugängliche Datentabelle. Donutwerte müssen mindestens null sein.

HTML

<div class="r-card" id="ex-donut-chart"></div>

JavaScript · type="module"

import {createChart} from 'https://ui.rittek.de/assets/modules/chart.js';
const chart = createChart(document.getElementById('ex-donut-chart'), {
  type: 'donut',
  title: 'Projektverteilung',
  labels: ["Web", "Portale", "Shops"],
  values: [48, 32, 20]
});

Module statt Abhängigkeiten.

import {createChart} from
  '/assets/modules/chart.js';

const chart = createChart(element, {
  type: 'line',
  title: 'Besuche',
  labels: ['Mo', 'Di', 'Mi'],
  values: [12, 18, 14]
});
chart.update({values: [15, 20, 16]});
// chart.destroy();

Erster Modulstand: Linie, Balken und Donut, SVG-Export, Datenaktualisierung und Tabellenalternative. Mehrere Reihen und schaltbare Legenden sind für Linien und Balken verfügbar. Datenwechsel blenden dezent ein; Zoom und geometrische Übergänge folgen später.