Wer kennt das nicht, dass er in einer Webseite ein Diagramm einfügen will, das auf aktuellen Daten beruht. Die häufigste Lösung für dieses Problem ist ein Screenshot von dem Diagramm in Excel, das als Bild in die HTML-Datei eingefügt wird. Diese Lösung ist gut für Tageszeitungen, die eine bestimmte Situation an einem bestimmten Tag veröffentlichen. Das Bild ist eine Momentaufnahme und schaut immer gleich aus.

Wenn es aber darum geht, dass die Daten in einer Seite einem sich ändernden Datenbestand automatisch folgen sollen, funktioniert diese Lösung nicht. Man müsste ja bei jeder Änderung der Daten auch die Bilder erneuern.

Excel-Diagramme in Webseiten einbetten

Seit es Office Online gibt, ist die Publikation von Excel-Dokumenten in Webseiten völlig problemlos. Es funktioniert genau so gut mit Google-Drive (Docs, Tabellen, Präsentationen) aber wegen der guten Zusammenarbeit zwischen der Desktopversion Office 365 und Office Online wird hier diese Variante demonstriert.

Aufgabe: verschiedene Daten betreffend die PCNEWS sind in Diagrammen darzustellen. Die Daten werden nach jeder Ausgabe aktualisiert und das sollen dann auch die Diagramme automatisch tun.

Schritt 1: Excel-Sheet

Die Beispiel-Tabelle „PCNEWS“ zeigt in der ersten Spalte alle 150 Ausgaben der PCNEWS und in den folgenden Spalten gewissen Kennzahlen für diese Ausgabe: Auflage, Herausgeber, Seiten, Lieferfirmen, Inserenten, Autoren. In jeweils einem Diagramm werden diese Daten in getrennten Blättern dargestellt. In der Fußzeile des Excel-Sheets kann man diese verschiedenen Diagramme anwählen. Im folgenden Beispielbild sieht man das Diagramm „Auflage“.

Schritt 2: Um diese Diagramme auf einer Webseite einzubetten, geht man in dieser Ansicht auf den Menüpunkt „File/Datei“:

und wählt „Embed“. Jetzt folgt folgender Dialog:

Wichtig ist die Entscheidung, ob man alles anzeigen möchte „Entire Worksheet“ (links oben) oder nur ein Diagramm (Chart). Der Unterschied ist, dass bei „Entire Chart“ in dem eingebetteten Bild auch eine Umschaltemöglichkeit zwischen den einzelnen Sheets gegeben ist.

Den „Embed code“ kopiert man. Er schaut ungefähr so aus:
<iframe
src="https://onedrive.live.com/embed?cid=EA3281BB6CC21929&resid=EA3281BB6CC21929%21470713
&authkey=AGDuRlUbX4Mb0mY
&em=2
&wdAllowInteractivity=False
&Item=Auflage
&wdDownloadButton=True"
width="700" height="679" frameborder="0" scrolling="no"></iframe>

Es wurden Zeilenumbrüche eingefügt, damit man die Struktur besser erkennt.

Schritt 3: Dieser obige Kode wurde nun hier in dieser Seite eingefügt. Daraus entsteht folgendes Diagramm:

Dieses Diagramm ist nun nicht mehr ein Bild sondern zeigt den augenblicklichen Zustand der Daten in der Tabelle. Wenn also eine Ausgabe dazu kommt oder sich Daten verändern, ändert sich automatisch auch das Diagramm dynamisch.

Word-Seiten einbetten

Was mit Excel-Tabellen/Diagrammen funktioniert, ist gleichermaßen in Word möglich. Man kann auf die hier beschriebene Art jedes Word-Dokument in eine HTML-Seite einbetten. Durch die automatisch eingeblendete Seitennavigation kann man durch das Dokument blättern. Es ist auch einstellbar, dass die Dokumentansicht auf einer bestimmten Seite startet, um die Aufmerksamkeit auf dieses Detail lenken zu können. Im folgenden Bild sieht man den „Embed“-Dialog von Word-Online. Das Bild ist ein Teil des eigebetteten Word-Dokuments.

Franz Fiala

Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.