50. Tabellenzauber - wie präsentieren Sie Ihre Tabelle mit Diagrammen im Internet?

Tabellen sind das Wissen unserer Welt - in übersichtlicher Form dargestellt in Diagrammen. Grund genug für Homepagebesitzer sich zu überlegen, wie Sie Ihre Daten ansprechend repräsetieren. Der Sternenhimmelstuermer stellt hier mehrere Möglichkeiten vor. Die einfachsten Möglichkeiten zuerst, dann wird es experimentiell.

Inhaltsangabe

1. Uralt und bewährt - Diagramm als Image einbinden
1. a. Wird oft vergessen: Powerpoint kann´s auch
2. Google Charts - Es gibt zur Zeit nichts besseres im Freewarebereich
3. Für Bastler - Plotr mit ein wenig js-Kenntnissen o. k.
4. Canvas
5. Mit Corel Draw oder Corel Rave ohne Programmierkenntnisse

1. Uralt und bewährt - Tabelle als Image einbinden

Vorraussetzung: Software wie Microsoft Office oder Open Office: Da heute schon Schüler das Erstellen von Diagrammen lernen, eigentlich kein Problem:

Dennoch einmal kurze Beschreibung: Das Grundprogramm zur Erstellung lautet bei Microsoft Excel. Einige User sagen jetzt bereits -das ist mir zu kopliziert:
Nein, im Vergleich zu anderen hier beschriebenen Möglichkeiten ist das echt easy und dauert bei einer anspruchslosen Tabelle nur Sekunden:

Anleitung in drei Schritten

a. Excel öffnen - und wie unten angegeben die Datein eintragen

ParteiStimmen
Partei120
Partei2 20
Partei360

Bei Wahl kommen 20+20+60 = 100 (%) heraus. Zahlen mit Kommawerten sind erlaubt. Zuerst die Partei, dann die Zahlen!

b. Danach alles Markieren:

Einfügen -  Diagramme in der Menüleiste auswählen

c. Danach wählen Sie den Diagrammtyp im Assistenten. Links die Darstellungsart - rechts die Form. Dann unten den Button weiter im Diagrammassistenten.

Dann Spalten auswählen bzw. die Grundeinstellung so belassen - mit weiter bestätigen.

Im nächsten Fenster Titel , Legende und Datenbeschriftungen in den Registerkarten festlegen. Bei Datenbeschriftungen müssen Sie im Fall von % Prozentsatz ankreuzen.

zweimal weiter und das war es! Danach kann man das ganze anpassen - probieren Sie ruhig alles mal aus: klicken Sie einzelne Bereiche ruhig an, skalieren Sie das Diagramm an den Anfasspunkten oder gehen Sie mit der rechten Maustaste auf das Diagramm und wählen: Diagrammfläche formatieren. Hier können professionell in allen Registerkarten Einstellungen wie z. B. Schrift, Größe und Typ festgelegt werden.

Viele User wissen gar nicht, welches Potential bei der normalen Erstellung von Diagrammen in Excel liegt...

Danach gibt es mehre Möglichkeiten das Diagramm ins Internet zu stellen:
- schlechteste Möglichkeit: ins PDF umwandeln oder in ein Worddokument mit copy und past einfügen. Sorry, aber das ist einfach abtörnend.
- Ins HTM-Format konvertieren im Speichern unter Dialogfeld - besser, aber der Code ist grausam (bei Excel, dann lieber mit Open Office..):

Effekte für Image in Html hinzufügen

Der offizielle Tipp zur Erstellung eines GIF-Images eines Diagrammes geht so:

Wenn Sie das Diagramm als HTML speichern wird ein gerade mal 4KB großes Bild für das Diagramm im gleichnamigen Ordner erstellt.

Das GIF-Format kann mit Programmen wie Animake durch Einfügen mehrerer Grafiken als "Film" genutzt werden....

Mit Programmen wie Corel Draw können Sie präzise Mouseovereffekte erstellen (Javascript!), ohne von Programmiersprachen Ahnung zu haben!

FastImage zum Erstellen von Verweissensitiven Grafiken (Das Programm lädt Grafiken, denen per anpassbaren Masken
verweissensitive Flächen zugeordnet werden. Danach wird der Quellcode ausgegeben). Daher eignet sich dieses Programm
wirklich für jeden.


Nachteil: eben nur beschränkte Animationsmöglichkeiten. Die Crowler von Suchmaschinen bevorzugen auslesbare Formate!

zurück
----

1. a. Wird oft vergessen: Powerpoint kann´s auch!

Sie können natürlich auch im Rahmen von Powerpoint eine Präsentation erstellen und diese als html ausgeben. Bei Office 2010 wird dann direkt mit Excelmaske gearbeitet. In den älteren Versionen ist das seperat oder eben durch einfügen eines Images möglich.

Der Vorteil ist, dass Sie in Powerpoint  Animationen erstellen können (einblenden, ausblenden...), die Sie z. B. mit der Freeware ISpring ins Flashformat konvertieren können.
Da sind tolle Möglichkeiten für eine ganze animierte Präsentation drinnen - alles per Freewre - nebenbei können Sie dann noch einen You Tube-Film einbinden und haben dann eine individuelle Präsentation, die keine Wünsche offen lässt und ohne ein Wort Porgrammiersprache erstellt wurde - für einen Designer oder ambitionierten Homepagebesitzer die sauberste Lösung - Leider wird das Flashformat nur durch Browserplugins unterstützt - viele Firmen verbieten inzwischen Flash af dem PC - kostet Performance und die Sicherheit...Schade, hätte Adobe ein wenig Konkurent gestattet, so wäre Canvas und Html 5 in weiten Teilen nicht nötig -  so die subjektive Meinung des Sternenhimmelstuermers: Weitere solche Monopole mit eigenen Cookiemanagement und verdeckten Datenschutzmanagern gehören abgeschafft!

-----

2. Google Charts - Es gibt zur Zeit nichts besseres im Freewarebereich

Die nächste Methode ist die zur Zeit beste und wird von Google angeboten. Bereits in der Einleitung wurde darauf hingewiesen, dass in Tabellen und Diagrammen das Wissen unserer Welt zusammengefast wird.
Der Deal ist dabei folgender: Sie bauen eine Zeile Programmcode in Ihrer Homepage ein (die Daten für die Erstellung einer Tabelle) und die Server von Google generieren Ihnen ein Diagrammbild. Ihr Server benötigt keinen Webspace. Ihr Diagramm wird bei Suchen besser berücksichtigt.
Dafür erhält Google die Daten.

Skeptiker werden sagen: Meine kostbaren Daten gehören mir! Aber mal ehrlich, da wohl niemand interne Daten ins Internet stellt (?) ist dieses Argument eher mies. Umgekehrt sind die Daten verfügbar und so können beispielsweise wie im Fall von Grippeepedemien schnell Verläufe einer Seuche analysiert werden. Das bringt das WEB eher weiter und nur durch Abgleichen mehrerer Tabellen werden Ergebnisse valide.

Selbst wenn Google mit Datensammlungen dann Geld macht, so steht im Gegenzug dann die kostenlose Leistung für Sie eher im Vordergrund. Oder würden Sie eine Tabelle ins Internet stellen, wenn Sie sie auch gewinnbringend verkaufen würden?

Den Code für das Diagramm können Sie sich in einem  englischsprachigen Generator generieren lassen oder selbst zusammenbasteln (englische Referenz von Google - aber easy und vollständig).

Geben Sie doch die folgende Zeile einfach in ihr Browserfenster ein: (copy and past):

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Das Beispiel zeigt Ihnen ein Kreisdiagramm mit den Flächen 60 % Hello und 40 % World mit Beschriftung.
Das Bild wird übrigens als PNG angezeigt und kann abgespeichert werden.

Bei größeren und komplexeren Tabellen wird der Generator Pflicht, da die Codezeile sonst sehr lang und fehlerträchtig werden kann.

Vorteile und Nachteile zusammengefast:

Vorteile
- absolute Browserkompatibilität
- traffic wird gespart
- Suchmaschinenbewertung optimiert
- relativ leichte Erstellung
- Wissenschaft wird weiter entwickelt
- keine Anmeldung

Tipp: Hm, Sie sollten zur Sicherheit ein erstelltes Diagrammbild abspeichern. Ansonsten ist bei einer Umstellung oder Beendung des Dienstes ihre Tabelle verloren - man weiß ja nie....

Negativ:
- extra Erstellung des Codes
- Fällt der Googleserver aus, sind Sie auch betroffen
- Google erfährt zuverlässig inderekt den Zugriff (Traffic) auf ihre Seite - mit jedem Aufruf des Codes

zurück

----------

3. Für Bastler - Plotr mit ein wenig js-Kenntnissen o. k.

Die folgenden zwei Methoden bereiten dem Sternenhimmelstuermer ein wenig Bauchschmerzen, da Sie alle etwas gemeinsam haben: mangelnde Kompatibilität und zur Zeit relativ schwierige Bearbeitung.

Im Falle des eingestellten Projektes Plotr wird Javascript zum Zeichnen verwendet. Da dieses Projekt funktioniert und der freien BSD-Lizenz funktioniert, hier als Vorschlag zum Download. Bei Plotr handelt sich um ein Framework, dass ausschließlich anderer programmiersprachen als Javascript arbeitet. Einfach den Zipordner extrahieren und ohne Installation sofort einsatzbereit. Als Webmaster brauchen Sie nur noch sich die Demoseiten (examples) anschauen, den Quellcode anschauen, anpassen und mit der entsprechenden Javascriptdatei (, die Sie wie auf der Example-Seite sehen,) verlinken und hochladen. Im ZIP-Archive sind bereits sämtliche Javascripts einschließlich Prototype enthalten. Also wirklich nur dieses Archiv herunterladen!

Der Ansatz ist Klasse - Es gibt verschiedene Diagrammtypen...bitte nicht mit flotr verwechseln. Für Bastler ist Plotr o. k.

Im Internet eplorer wird das leider nicht angezeigt werden, so dass eine sogenannte Fallbacklösung (Einbindung eines Bildes) zum Zuge kommt - also für den normalsterblichen User: Wollen Sie wirklich alle User mit dem Internetexplorer und aktivierten No Script in Firefox mit Javascipt zu unsicheren Handlungen oder Umstellung des Browsers nötigen?

Andere Ansätze (deutsche Seite) finden Sie hier - auch die Kaufvarianten...
Daher hier keine weiteren Ausführungen

zurück

----------

4. Canvas

Canvas wird die Alternative zu Flash werden und von Firefox , Chrome, Safari und Opera in den neuesten Versionen weitgehend  unterstützt. Die Microsoft Cooperation zögert noch, aber wenn die nicht weiterhin Marktanteile verlieren wollen, dann heißt es: Unterstützt dieses Projekt und setzt euch an die Spitze!

Mit Canvas wird man in Zukunft Tabellen erstellen können. Erste Ansätze finden Sie z. B. hier. Nicht uninteressant ist der Verweis eines Kommentators, dass die Präsentation auch mit einer Tabelle und css bei einem Säulendiagramm geht. Der Link von der o. a. Seite ist valide, da dort politischer Inhalt und quasi Werbung für ein Massenverdummungs- , meinte natürlich Verbreitungs-system gemacht wird, kein direkter Link.

Diagramme sind quasi ein Abfallprodukt von Canvas - wie Sie an der animierte rafik sehen können, aber eine mächtge Alternative

zurück

------ 


5. Flash oder Html mit Mouseovereffekten - Mit Corel Draw oder Corel Rave ohne Programmierkenntnisse

Der Sternenhimmelstuermer verwies bereits bei der Flash-Erstellung bei den Umweg über Powerpoint und ispring (freeware), auf die Möglichkeit ohne Quellcode eine Tabelle mit Effekten auszustatten.

Mit Corel Draw in Versionen der Grafiksuite  unter 11 (einschließlich 11) ist Corel R. A. V. E. Bestandteil. Damit können Sie Flash - und noch viel wichtiger GIF-Animationen erstellen.

In den neueren Versionen bleibt immer noch die Möglichkeit (wie in den alten Versionen) eine Tabelle zu Zeichnen (oder eine bestehende durch Vektorisierung zu übernehmen) und danach mit Mousovereffekten zu versehen.

Die einzelnen ebenen Zeichnen Sie dann, in dem Sie ein Objekt anklicken und  mit Effekt - Rollover in der Menüleiste die einzelnen Zustände nacheinander bearbeiten:

Dazu holen Sie sich mit Effekt - Rollover -  Rollover bearbeiten erstmal eine weitere Bearbeitungsleiste hervor.

Sie haben nun drei neue Zeichenfenster, von denen jeweils eines angezeigt wird:   normal, darüber und angeklickt. Die Registerkarte werden links unten in der Leiste angezeigt, wo ansonsten ihre Seiten stehen - dazu kommt der Punkt: Objektbearbeitung beenden.

Zeichnen Sie einmal ein Quadrat. Klicken es einmal an (Auswählen des Objektes) und bearbeiten Sie die drei Zustände. Indem Sie einfach dem Dreieck verschiedene Farben oder Größen zuweisen - Sie können auch ein anderes Objekt oder Image einbinden. Hinterher vergeben Sie eine absolute Adressierung mit http....das ist wichtig! Relative Pfade funktionieren nicht!

Achten Sie beim Mouseovereffekt dabei darauf, dass sich Objekte nicht mit regulären Objekten auf der Zeichenebene überschneiden - wenn doch, so können Sie die Grafik immer noch als Flashanimation verwenden. Corel Draw kann ihr Ergebnis als Flash oder Html exportieren.

Bei einer Flashanimation ist der Vorteil, das Sie z. B. für ein Tortendiagramm die einzelnen Kuchenstücke punktgenau animieren können, um z. B. beim herüberfahren einen Farbwechsel oder Anklicken einen Sprungpunkt - Hyperlink zu einer Seite zu setzen.

Das geht beim Rollovereffekt leider nicht. Hier werden Images verwendet, die bekanntlich quadratisch sind - so dass beim Herüberfahren mit der Maus nur quadratische Flächen "ausgetauscht" werden können (das Bild 1 wechselt zu Bild 2 beim herüberfahren  mit der Maus. Nein, auch Corel ist eben nicht die Quadratur des Kreises gelungen.

Auf sensitive Grafiken mit Fastimage ging der Sternenhimmelstuermer schon ein. Der Quellcode bzw. Die Bilder in einer HTML-Seite, die von Corel Draw erstellt wurde, ist gut bearbeitbar....

Mit ein wenig Html-Kenntnissen ein animiertes Rollover zu erstellen ist eine der leichteren Aufgaben und kann mit vielen Programmen oder Handarbeit mehr oder weniger bequem realisiert werden.

zurück
------

Dann gibt es diverse diverse Programme wie z. B. 1st chart (deutsch, freeware, nur Tortendiagramme, keine Installation, Ergebnis nur JPG), die Diagramme zeichnen und in einem Bildformat abspeichern. Mit ein wenig Suchen finden Sie schon die passende Software - ohne mehrer hundert Dollar zu zahlen - was Angesichts der Möglichkeiten von Open Office und Microsoft Office einfach mal ein wenig übertrieben ist...

Für professionelle geschäftliche und wissenschaftliche Lösungen lohnt sich dann schon SPSS - damit meint der Sternenhimmelstuermer Betriebe, die weltweit agieren oder komplexe wissenschaftliche Forschungen mit riesigen Datenmengen bewältigen müssen - das ist aber für den Privatanwender und Kleine Betriebe in der Regel  übertrieben...



Impressum
Datenschutz