Image Charts
Dynamic Icons

Dynamic Icons mit Google Image Charts

Grundlagen

Die Dynamic Icons sind keine Charts im althergebrachen Sinn, es handelt sich vielmehr um höchst unterschiedliche Grafiken. Demzufolge ist der Aufbau des Api-Aufrufes auch vollkommen anders. Hier zunächst ein Beispiel:

Beispiel

Der Api-Aufruf-Code sieht so aus:

chst=d_fnote&chld=arrow_d|1|000000|h|Hier+mehr|lesen

Die bei den normalen Charts vorgestellten Parameter haben hier nichts zu suchen, die beiden Parameter sind:

  • chst= wird mit einer String-Konstanten belegt, die den Typ des Icons festlegt, in diesem Beispiel steht der Wert d_fnote eben für eine Gruppe von Icons, die Google als Fun Style Notes bezeichnet.
  • chld= gibt zusätzliche Werte an. Dabei unterscheiden sich diese Werte für die einzelnen Icon-Typen. Der erste Teilparameter arrow_d steht für die Form der Fussnote. 1 ist ein Größenparamter. 000000 ist ein 6-stelliger Hexadezimalwert für die Textfarbe. h steht für die Textausrichtung. danach folgt der eigentliche Text, wobei die einzelnen Wort wiederum durch ein Pluszeichen miteinander verknüpft werden und eine neue Zeile mit einem senkrechten Strich eingeleitet wird.

Weitere Beispiele

Bubbles /Sprechblasen

Dieser Code

chst=d_bubble_icon_text_small&chld=petrol|bb|Ich bin eine Blase|FFFF88|000000

erzeugt:

Beispiel Speech-Bubble

Pins

Dieser Code

chst=d_map_pin_letter&chld=A%7CFF0088%7C000000

erzeugt:

Beispiel

Anmerkungen

Dieser Code

d_fnote_title&chld=pinned_c|1|004400|l|Achtung|Das ist eine |wichtige Mitteilung

erzeugt:

Beispiel

Wettervorhersagen

Dieser Code

d_weather&chld=taped_y|sunny|Berlin|max+25%C2%B0C|min+15%C2%B0C

erzeugt:

Beispiel Wettericon

Mehrzeiliger Textblock ohne Icon

Dieser Code

chart?chst=d_text_outline&chld=FF8800|18|l|000000|_|Ein Text|In Farbe+longer+line+mal sehen was geschieht

erzeugt:

Beispiel

Einzeiliger Textblock ohne Icon

Dieser Code

chst=d_fnote&chld=arrow_d|1|000000|h|Hier+mehr|lesen

erzeugt:

Beispiel

Parameter chst

Mit dem Parameter chst wird die Art der Grafik festgelegt. Es gibt u.a. die folgenden Möglichkeiten:

Bubbles Sprechblasen

  • d_bubble_text_small, Beispiel:Beispiel
  • d_bubble_icon_text_big
  • d_bubble_icon_text_big_withshadow

Pins

  • d_map_pin_icon
  • d_map_pin_icon_withshadow

Text mit Icon

  • d_simple_text_icon_left, Beispiel:Beispiel

Der Api-Aufruf hat diesen Code

chst=d_simple_text_icon_left&chld=Flugzeug|28|bbffaa|glyphish_airplane|16|ff3344|aa00FF

Die einzelnen Parameter haben diese Bedeutung

  • chst=d_simple_text_icon_left -die Iconart
  • chld=Flugzeug - der angezeigte Text
  • 28 - die Schriftgröße
  • bbffaa - die Schriftfarbe
  • glyphish_airplane - Das Icon
  • 12 - die Icon-Größe, unterstützt werden 12, 16,24
  • ff3344 - die die Farbe der Icons
  • aa00FF - Farbe des Text-Outlines

Kleine Spielerei mit den Flugzeugen

http://jsfiddle.net/vcX4U/1/