Komplexe Inhalte einfach und schnell vermittelt
Simplify complex content
Der Gestaltung sind keine Grenzen gesetzt: Einfache Farbflächen, Verläufe, Flächen mit Mustern, Fotos oder Symbolen, statisch oder animiert, mit themenbezogenen Hintergründen und Audioeffekten.
Wenn sich die Datenbasis der Grafik regelmäßig verändert, kann eine Schnittstelle zwischen Datenbanken und dem Layout der Grafik programmiert werden.
In unserem Webdesign Layout B-2-B Frontend zeigen wir die Einbindung von typischen MS Office Grafiken und Tabellen aus PowerPoint oder Excel in Internetseiten.
Bei allen Charts lassen sich Balken, Linien, Datenpunkte oder Segmente individuell gestalten. Neben Farben und Farbverläufen sind auch Muster, Grafiken und Fotos möglich. Ebenso lassen sich die Hintergründe sowie Legenden, Gitternetzlinien und Texte beliebig gestalten.
Die meisten Animationen, die beim klicken oder überfahren mit der Maus ausgelöst werden, werden auf mobilen Endgeräten und Touch-Screens durch antippen mit dem Finger ausgelöst.
css3:balkendiagramm basic
- Market share since 2010
- Value 10%
- Value 20%
- Value 30%
- Value 40%
- Value 50%
- Value 60%
- Value 70%
- Value 80%
- Value 90%
- Value 65%
- Value 55%
- Value 100%
Balkendiagramm
- Beliebig viele Werte
- Auch negative Werte oder Werte > 100% möglich
- Animation: Bei 'mouse-over' verändern die drei oberen Balken die Farbe, die Fotofüllung unten das Bildmotiv
css3:Balkendiagramm complex
Market Share %
Balkendiagramm
- Der User kann die Datenreihen mit einem 'mouse-click' oder 'finger-tip' auf die Legende ein- oder ausblenden, was bei komplexen Grafiken die Übersichtlichkeit verbessern kann
- Animation: Bei 'mouse-over' über das Diagramm wird ein Hintergrundbild angezeigt
- Animation: Bei 'mouse-over' über auf die einzelnen Balken werden die Referenzwerte angezeigt
css3:säulendiagramm basic
Säulendiagramm
- Animation: Bei 'mouse-over' über die einzelnen Balken werden die Referenzwerte angezeigt
css3:säulendiagramm complex
Säulendiagramm
- Beliebig skalierung und Werte auf der y-Achse
- Animation: 'mouse-over" auf die Legende zeigt den Text "Info ▲" an ein 'mouse-click" offnet ein Infofenster mit mehr Text
- Animation: 'mouse-over" auf die drei Säulen von Q2 zeigt Infos zu den Säulen an
- Die Säulen in Q3 haben eine Schatten und wirken etwas plastischer. So können auch 3D-Säulen gestaltete werden
- Die Säulen in Q4 habe drei abgerundete Ecken
css3:säulendiagramm user input
Marktanteile %
Säulendiagramm
- In diesem Diagramm kann der User selber Werte eingeben, die als Ausgangswert für weitere Berechnungen dienen können.
- Die drei grünen Säulen haben den Anfangswert 0% und können bis 100% erhöht werden.
- Bei den pinken Säulen ist der Anfangswertert 10% und der zweite Wert 50% höher als der Erste. Wird vom User der erste Wert erhöht, erhöht sich der zweite Wert entsprechend.
css3:tortendiagramm basic
Market Share %
Tortendiagramm
- Einfache Darstellung eines Tortendiagramms
css3:Tortendiagramm complex
Market Share %
Tortendiagramm
- Animation: Das Tortendiagramm baut sich bei Aufruf der Seite im Uhrzeigersinn drehend auf und der Effekt lässt sich mit dem Button Reset wiederholen
- Animation: Mit dem Button Randomize zeigen sich zufällige Varianten von Segmenten und Farben
css3:kurvendiagramm 1 complex
Longterm prospect international markets
Kurvendiagramm
- Mit einem 'mouse-click' auf die Legendentexte lassen sich die jeweiligen Linien ein- und ausblenden
- Mit einem 'mouse-over' über die Datenpunkte der Linien, werden die Relevaten Werte angezeigt
css3:kurvendiagramm 2 complex
Longterm prospect international markets
Kurvendiagramm
- Mit einem 'mouse-click' auf die Legendentexte lassen sich die jeweiligen Linien ein- und ausblenden
- Mit einem 'mouse-over' über die Datenpunkte der Linien, werden die Relevaten Werte angezeigt
- Mit den Buttons Dataset ++ / -- lassen sich Kurven zu- und abschalten
- Mit den Buttons Data ++ / -- lassen sich auf der x-Achse Monate zu- und abschalten
- Animation: Mit dem Button Randomize zeigen sich zufällige Varianten von Werten und Farben
css3:Punktediagramm complex
Longterm prospect international markets
Kurvendiagramm
- Mit einem 'mouse-click' auf die Legendentexte lassen sich die jeweiligen Linien ein- und ausblenden
- Mit einem 'mouse-over' über die Datenpunkte der Linien, werden die Relevaten Werte angezeigt