Mit "Click-Events" bezeichnet man Ereignisse, die durch Maus-Klicks auf ein Bildschirmelement ausgelöst werden. Bei FlashChart wird, wenn man mit dem Mauszeiger auf ein Diagrammelement zeigt, in der Regel ein Tooltip angezeigt. Zusätzlich dazu kann man nun mit der Version 1.2.0 von Flashchart mit Maus-Klicks auf Diagrammelemente eine Aktion auslösen. Möglich ist der Aufruf einer "http" oder "https" URL oder die Ausführung eines Javascripts. Die Aktionen auf diese so genannten "Click-Events" werden über die Parameter:
- onclick - betrifft Diagrammelemente
- key_onclick - betrifft die Inhalte der Diagrammlegende
- alert_onclick - betrifft Diagrammelemente wo ein "Alert" erzeugt wurde
definiert. Zusätzlich dazu kann man nun über den neuen Parameter "menu" (über ein ein/ausklappbares "Menü" Element) das Ausführen von Javascripts anfordern.
FlashChart unterstützt die Verwendung und Nutzung von Aktionen für Click-Events in mehrfacher Hinsicht. So kann man neben der Aufruf von Web-Seiten auch bereitgestellte Javascripts verwenden als auch Javascripts von FlashChart erzeugen lassen:
- Parameter "create_script" erzeugt ein Script zur Verwendung für Click-Events
- Javascript "show_modalchart" ruft ein Modales Fenster auf
- Javascript "save_image" Konvertiert das Diagramm in ein Image
- Javascript "print_page" Konvertiert das Diagramm in ein Image und ruft dann den Druckerdialog auf (bei Microsofts Internet Explorer findet keine Image-Konvertierung statt)
- Javascript "click_parms"Zeigt alle Parameter, die von Open Flashchart (OFC) übergeben wurden
- Javascript "test_click" hilft für Tests bzw. bei der Erstellung von Popup- und modalen Windows
Die folgenden Seiten zeigen anhand von Beispielen, wie man diese neue Funktion von Flaschart nutzen kann.
{tab Legenden|primary}Default Klick-Attribut für Legenden
Legenden werden erzeugt, wenn mehrere Datengruppen verwendet werden und der Parameter "legend" mitgegeben wurde. Für Tortendiagramme wird ein Legende erzeugt, wenn der Parameter "pie_legend" auf "1" gesetzt wurde (oder global in den Plugin Parametern auf "Ja" eingestellt ist).
Für die Legendeninhalte kann man über den Parameter "key_onclick" jweils eine Aktion definieren. Falls kein "key_onclick" Attribut gesetzt ist, wird der Default "toggle-visibility" verwendet. Beim Anklicken verschwindet bzw. erscheint dann das jeweilige Diagrammelement.
Hinweis: Für gestapelte Säulendiagramme (Type "bar_stack") ist "toggle-visibility" nicht sinnvoll, da hierbei das gesamte Diagramm betroffen ist. Deswegen gibt es da keinen Default. {flashchart title="Skill Profile - Demo" type="radar_area" alpha="0.5" width="100%" height="400" data="50,50,50,50,50,50,50|60,30,55,70,40,40,60" y_max="80" y_step="20" legend_fontsize="13" radar_spoke_labels="Teaming,SOA,Project
Management,Programming
languages,Databases,Operating
Systems,Experience" tooltip="#legend#: #val# points on #spoke#" legend="Requirement,Candidad" right_legend="0" }radar_area{/flashchart}
Flashchart Parameter für obiges Beispiel:
{flashchart title="Skill Profile - Demo" type="radar_area"
alpha="0.5" width="100%" height="400" data="50,50,50,50,50,50,50|60,30,55,70,40,40,60"
y_max="80" y_step="20" legend_fontsize="13"
radar_spoke_labels="Teaming,SOA,Project<br />Management,
Programming<br />languages,Databases,Operating <br />Systems,Experience"
tooltip="#legend#: #val# points on #spoke#" legend="Requirement,Candidad"
right_legend="0" }radar_area{/flashchart}
{tab URLs verwenden|primary}
URLs (http:// bzw. https://) verwenden
In diesem Beispiel werden beide Parameter "onclick" und "key_onclick" dazu verwendet, entfernte Webseiten, die die Thematik ("Bevölkerung Statistik") weiterführen, aufzurufen. Jeder der beiden Parameter hat dabei die gleichen URLs zu den Aufrufen eingetragen. Für Tortendiagramme gilt eine "eins zu eins" Relation der Diagrammelemente und der jeweiligen URLs in den Parametern "onclick" bzw. "key_onclick". Siehe auch die Darstellung der verwendeten Flashchart Parameter weiter unten.
{flashchart title="Bundesländer mit der geringsten Bevölkerungsdichte
(Einwohner je Quadratkilometer)" label_fontsize="11" height="450" type="pie" right_legend="1" pie_radius="140" x_axis_labels="Schleswig-Holstein,Niedersachsen,Rheinland Pfalz,Bayern,Brandenburg,Mecklenburg-Vorp.,Sachsen-Anhalt,Thüringen" data="179,166,202,177,85,71,115,139" tooltip="in #label# liegt die Bevölkerungsdichte
bei #val# Einwohnern pro Quadratkilometer" onclick="http://www.schleswig-holstein.de/Portal/DE/LandLeute/ZahlenFakten/Bevoelkerung/Bevoelkerung_node.html,http://www.niedersachsen.de/land_leute/land/zahlen_fakten/bevoelkerung/statistische-informationen-ueber-die-bevoelkerung-des-landes-niedersachsen-19947.html,http://www.statistik.rlp.de/no_cache/staat-und-gesellschaft/bevoelkerung-und-gebiet/tabellen/bevoelkerungsdichte/,https://www.statistik.bayern.de/statistik/bevoelkerungsstand/,http://de.wikipedia.org/wiki/Brandenburg#Bev.C3.B6lkerungsentwicklung,http://www.statistik-mv.de/cms2/STAM_prod/STAM/de/bhf/index.jsp,http://www.statistik.sachsen-anhalt.de/bevoelkerung/index.html,http://www.tls.thueringen.de/datenbank/TabAnzeige.asp?tabelle=zr000101||" key_onclick="http://www.schleswig-holstein.de/Portal/DE/LandLeute/ZahlenFakten/Bevoelkerung/Bevoelkerung_node.html,http://www.niedersachsen.de/land_leute/land/zahlen_fakten/bevoelkerung/statistische-informationen-ueber-die-bevoelkerung-des-landes-niedersachsen-19947.html,http://www.statistik.rlp.de/no_cache/staat-und-gesellschaft/bevoelkerung-und-gebiet/tabellen/bevoelkerungsdichte/,https://www.statistik.bayern.de/statistik/bevoelkerungsstand/,http://de.wikipedia.org/wiki/Brandenburg#Bev.C3.B6lkerungsentwicklung,http://www.statistik-mv.de/cms2/STAM_prod/STAM/de/bhf/index.jsp,http://www.statistik.sachsen-anhalt.de/bevoelkerung/index.html,http://www.tls.thueringen.de/datenbank/TabAnzeige.asp?tabelle=zr000101||"}chart_01{/flashchart}
Flashchart Parameter für obiges Beispiel:
{flashchart title="Bundesländer mit der geringsten Bevölkerungsdichte<br /> (Einwohner je Quadratkilometer)"
height="500" type="pie" right_legend="1" pie_radius="140" label_fontsize="11"
data="179,166,202,177,85,71,115,139"
x_axis_labels="Schleswig-Holstein,Niedersachsen,Rheinland Pfalz,Bayern,Brandenburg,Mecklenburg-Vorp.,Sachsen-Anhalt,Thüringen"
tooltip="in #label# liegt die Bevölkerungsdichte <br />bei #val# Einwohnern pro Quadratkilometer"
onclick="http://www.schleswig-holstein.de/Portal/DE/LandLeute/ZahlenFakten/Bevoelkerung/Bevoelkerung_node.html,
http://www.niedersachsen.de/portal/live.php?navigation_id=6970&article_id=19947&_psmand=1000,
http://www.statistik.rlp.de/no_cache/staat-und-gesellschaft/bevoelkerung-und-gebiet/tabellen/bevoelkerungsdichte/,
https://www.statistik.bayern.de/statistik/bevoelkerungsstand/,
http://de.wikipedia.org/wiki/Brandenburg#Bev.C3.B6lkerungsentwicklung,
http://www.statistik-mv.de/cms2/STAM_prod/STAM/de/bhf/index.jsp,
http://www.statistik.sachsen-anhalt.de/bevoelkerung/index.html,
http://www.tls.thueringen.de/datenbank/TabAnzeige.asp?tabelle=zr000101||"
key_onclick="http://www.schleswig-holstein.de/Portal/DE/LandLeute/ZahlenFakten/Bevoelkerung/Bevoelkerung_node.html,
http://www.niedersachsen.de/portal/live.php?navigation_id=6970&article_id=19947&_psmand=1000,
http://www.statistik.rlp.de/no_cache/staat-und-gesellschaft/bevoelkerung-und-gebiet/tabellen/bevoelkerungsdichte/,
https://www.statistik.bayern.de/statistik/bevoelkerungsstand/,
http://de.wikipedia.org/wiki/Brandenburg#Bev.C3.B6lkerungsentwicklung,
http://www.statistik-mv.de/cms2/STAM_prod/STAM/de/bhf/index.jsp,
http://www.statistik.sachsen-anhalt.de/bevoelkerung/index.html,
http://www.tls.thueringen.de/datenbank/TabAnzeige.asp?tabelle=zr000101||"}chart_01{/flashchart}
{tab Popup Windows|primary}
Javascript zum Aufruf von Popup-Windows
In folgenden drei Beispielen wird ein Szenario dargestellt, wo Umsatzstatistiken in verschiedenen Diagrammen dargestellt werden. Jedoch werden nicht alle Diagramme auf einer Inhaltsseite angezeigt, sondern es wird über ein einzelnes "Eltern" Diagramm der Aufruf von weiteren Diagrammen ermöglicht ("drill in" Verfahren").
In diesem Beipiel kommt das von FlashChart bereitgestellte Javascript "show_modalchart" zum Einsatz. Die Javascripts "test_click" und "click_parms" werden beim Anklicken der Legendeninhalte bzw. Diagammelementen ausgeführt, und sollen die Verwendung des Scripts illustrieren. Die Diagramme, die über das Anklicken der Elemente des Tortendiagramms angezeigt werden sollen, sind mit den Attributen "modal_chart" und "hide_chart" definiert, sodass zum einen die HTML-Resourcen für Modal Windows erzeugt werden und zum anderen die Diagramme selbst nicht angezeigt werden. Die Namenskonventionen für dies HTML-Resourcen sind durch die Parameterübergabe von OFC (Open Flash Chart) und das jeweilige Javascript festgelegt (das Script "test_click" hilft bei der Namensfindung).
Derzeitge Parameterübergabe von OFC (die man auch für eigene Javascripts verwenden kann):
- Parameter 1: immer die Chart-id (im Beispiel "umsatz")
- Parameter 2:
- Diagrammelement: Index des Elements (im Beispiel "0", "1", oder "2")
- Legendenelement: Name des Elements (im Beispiel "Frankfurt", "Stuttgart" oder "München")
- Diagramm-Menu: Text des Menueintrags
- Parameter 3: Y-Wert bei Linien- oder Radardiagrammen oder "null" bei den anderen Typen.
- Parameter 4: Joomla Root in der Form "http://host-name/.."
Aus den beiden ersten Parametern ergibt sich die chartid für Modale Windows, z. B: für das erste Tortensegment ("Frankfurt") ist Parameter 1 "umsatz" und Parameter 2 "0" - daraus wird die chartid "umsatz_0".Alle Scripts sind in der Bibliothek "flashchart.js" im Verzeichnis "../plugins/content/flashchart/js" zu finden.
{flashchart title="Umsatz im Januar nach Standort" width="100%" height="350" type="pie" pie_legend="1" right_legend="1" tooltip="in #label# wurde ein Umsatz von #val#€ erzielt" data="Frankfurt,München,Stuttgart/48000,46000,51000" bg_image="/media/plg_content_flashchart/images/sample_logo.jpg" key_onclick="click_parms,test_click,show_modalchart" onclick="show_modalchart,show_modalchart,click_parms"}umsatz{/flashchart} {flashchart height="300" width="500" modal_chart="#" hide_chart="1" data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500" title="Umsatz im Januar - Frankfurt" tooltip="#key#: #val#€" right_legend="1" legend="Bücher,CDs,DVDs" x_legend="Woche" }umsatz_0{/flashchart} {flashchart height="300" width="500" modal_chart="#" hide_chart="1" data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400" title="Umsatz im Januar - München" tooltip="#key#: #val#€" right_legend="1" legend="Bücher,CDs,DVDs" x_legend="Woche" }umsatz_1{/flashchart} {flashchart height="300" width="500" modal_chart="#" hide_chart="1" type="bar_stack" rearrange_data="1" data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700" title="Umsatz im Januar - Stuttgart" tooltip="#key#: #val#€ (Total #total#€)" right_legend="1" legend="Bücher,CDs,DVDs,Drucken" key_onclick=",,,print_page" x_legend="Woche" }umsatz_Stuttgart{/flashchart}
Flashchart Parameter für obiges Beispiel:
{flashchart title="Umsatz im Januar nach Standort" width="100%" height="350" type="pie"
tooltip="in #label# wurde ein Umsatz von #val#€ erzielt" right_legend="1" pie_legend="1"
data="Frankfurt,München,Stuttgart/48000,46000,51000"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
key_onclick="click_parms,test_click,show_modalchart"
onclick="show_modalchart,show_modalchart,click_parms"}umsatz{/flashchart}
{flashchart title="Umsatz im Januar - Frankfurt" height="100%" width="100%"
modal_chart="#" hide_chart="1"
data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500"
tooltip="#key#: #val#€" right_legend="1" legend="Bücher,CDs,DVDs"
x_legend="Woche" }umsatz_0{/flashchart}
{flashchart title="Umsatz im Januar - München" height="100%" width="100%"
modal_chart="#" hide_chart="1"
data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400"
tooltip="#key#: #val#€" right_legend="1" legend="Bücher,CDs,DVDs"
x_legend="Woche" }umsatz_1{/flashchart}
{flashchart title="Umsatz im Januar - Stuttgart" height="100%" width="100%"
modal_chart="#" hide_chart="1" type="bar_stack" rearrange_data="1"
data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700"
tooltip="#key#: #val#€ (Total #total#€)" right_legend="1" legend="Bücher,CDs,DVDs,Drucken"
key_onclick=",,,print_page" x_legend="Woche" }umsatz_Stuttgart{/flashchart}
{tab Script (create_script)|primary}
Verwendung und Einsatz des Parameters 'create_script'
Anstatt beim Anklicken eines Diagrammelements ein Popup-Window anzuzeigen, kann man auch ein angezeigtes Diagramm durch ein anderes ersetzen.
Dafür ist es notwendig, die entsprechenden Javascripts zur Verfügung zu haben. Flashchart ermöglicht dies über den Parameter "create_script". Die Namen der von Flashchart erstellten Scripts werden in die Parameter "onclick" bzw. "key_onclick" eingetragen.
In diesem Beispiel wird zunächst ein "Eltern" Diagramm angezeigt, die anderen Diagramme sind mit dem Parameter "hide_chart" versteckt. Dabei ist es wichtig, dass alle Diagramme mit dem gleichen Chart-ID (hier "umsatz1") generiert werden.
...Klick für zurück" legend="Bücher,CDs,DVDs" x_legend="Woche" bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"}umsatz1{/flashchart} {flashchart height="350" width="100%" create_script="umsatz_muenchen" hide_chart="1" onclick="umsatz_total,umsatz_total,umsatz_total" bg_image="/media/plg_content_flashchart/images/sample_logo.jpg" data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400" title="Umsatz im Januar - München" tooltip="#key#: #val#€
...Klick für zurück" legend="Bücher,CDs,DVDs" x_legend="Woche" }umsatz1{/flashchart} {flashchart height="350" width="100%" create_script="umsatz_stuttgart" hide_chart="1" type="bar_stack" rearrange_data="1" onclick="umsatz_total" bg_image="/media/plg_content_flashchart/images/sample_logo.jpg" data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700" title="Umsatz im Januar - Stuttgart" tooltip="#key#: #val#€ (Total #total#€)
...Klick für zurück" legend="Bücher,CDs,DVDs,Drucken" key_onclick=",,,print_page" x_legend="Woche" }umsatz1{/flashchart}
Flashchart Parameter für obiges Beispiel:
{flashchart title="Umsatz im Januar nach Standort" width="100%" height="350" type="pie"
right_legend="1" tooltip="in #label# wurde ein Umsatz von #val#€ erzielt"
data="Frankfurt,München,Stuttgart/48000,46000,51000"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
create_script="umsatz_total"
key_onclick="umsatz_frankfurt,umsatz_muenchen,umsatz_stuttgart"
onclick="umsatz_frankfurt,umsatz_muenchen,umsatz_stuttgart"}umsatz1{/flashchart}
{flashchart title="Umsatz im Januar - Frankfurt" height="350" width="100%"
create_script="umsatz_frankfurt" hide_chart="1"
onclick="umsatz_total,umsatz_total,umsatz_total"
data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
tooltip="#key#: #val#€ <br /><<br />...Klick für zurück"
legend="Bücher,CDs,DVDs" x_legend="Woche" }umsatz1{/flashchart}
{flashchart title="Umsatz im Januar - München" height="350" width="100%"
create_script="umsatz_muenchen" hide_chart="1"
onclick="umsatz_total,umsatz_total,umsatz_total"
data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
tooltip="#key#: #val#€ <br /><br />...Klick für zurück"
legend="Bücher,CDs,DVDs" x_legend="Woche" }umsatz1{/flashchart}
{flashchart title="Umsatz im Januar - Stuttgart" height="350" width="100%"
create_script="umsatz_stuttgart" hide_chart="1" type="bar_stack" rearrange_data="1"
onclick="umsatz_total"
data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
tooltip="#key#: #val#€ (Total #total#€)<br /><br />...Klick für zurück"
legend="Bücher,CDs,DVDs,Drucken"
key_onclick=",,,print_page" x_legend="Woche" }umsatz1{/flashchart}
{tab Einsatz von Menues|primary}
Verwendung und Einsatz von Menues (Parameter 'menu')
Die Möglichkeiten von "create_script" kann man mit dem Einsatz von "menu" erweitern bzw. ergänzen. Der Parameter "menu" veranlasst die Erzeugung eines ausklappbaren Menüs auf der rechten oberen Seite des Diagramms. Jeder einzelne Menüeintrag besteht aus einem Menütext und einem zugehörigen Javascript (durch Komma getrennt), Menüeinträge sind durch das Oder-Zeichen "|" voneinander getrennt.
Auch in diesem Beispiel wird zunächst ein "Eltern" Diagramm angezeigt, die anderen Diagramme sind mit dem Parameter "hide_chart" versteckt. Dabei ist es wichtig, dass alle Diagramme mit dem gleichen Chart-ID (hier "umsatz2") generiert werden.
Flashchart Parameter für obiges Beispiel:
{flashchart title="Umsatz im Januar nach Standort" width="100%" height="350"
create_script="umsatz_alle"
menu="München,umsatz2_muenchen|Frankfurt,umsatz2_frankfurt|Stuttgart,umsatz2_stuttgart"
onclick="umsatz2_frankfurt,umsatz2_muenchen,umsatz2_stuttgart"
type="pie" pie_legend="0" pie_label_values="1"
tooltip="Umsatz in #label#" dimension=" €"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
data="Frankfurt,München,Stuttgart/48000,46000,51000" }umsatz2{/flashchart}
{flashchart title="Umsatz im Januar - Frankfurt" height="350" width="100%"
create_script="umsatz2_frankfurt" hide_chart="1" dimension=" €"
menu="alle Standorte,umsatz_alle|München,umsatz2_muenchen|Stuttgart,umsatz2_stuttgart|Drucken,print_page"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500"
tooltip="#key#: #val#€" right_legend="1" legend="Bücher,CDs,DVDs"
x_legend="Woche" }umsatz2{/flashchart}
{flashchart title="Umsatz im Januar - München" height="350" width="100%"
create_script="umsatz2_muenchen" hide_chart="1" dimension=" €"
menu="alle Standorte,umsatz_alle|Frankfurt,umsatz2_frankfurt|Stuttgart,umsatz2_stuttgart|Drucken,print_page"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400"
tooltip="#key#: #val#€" right_legend="1" legend="Bücher,CDs,DVDs"
x_legend="Woche" }umsatz2{/flashchart}
{flashchart title="Umsatz im Januar - Stuttgart" height="350" width="100%"
create_script="umsatz2_stuttgart" hide_chart="1"
type="bar_stack" show_barvalues="1" dimension=" €" rearrange_data="1"
menu="alle Standorte,umsatz_alle|München,umsatz2_muenchen|Frankfurt,umsatz2_frankfurt|Drucken,print_page"
bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"
data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700"
tooltip="#key#: #val#€ (Total #total#€)" right_legend="1" legend="Bücher,CDs,DVDs"
x_legend="Woche" }umsatz2{/flashchart}
{/tabs}