With a pointing device such as a mouse, clicking a graphical element triggers a "mouse click" event (or click event). FlashChart now with version 1.2.0 is able to handle click events and may trigger actions. Possible are two types of actions:
- navigate via "http" or "https" URLs to internal or external websites
- execute javascripts
You define these actions on click events with parameters:
- onclick - relates to chart elements
- key_onclick - relates to legend (key) items
- alert_onclick - relates to chart elements where an "alert" has been triggered
Additionly you now may via new parameter "menu" (which will create a chart menu element) request execution of javascripts.
FlashChart supports actions on click-events in muliple ways. E.g. you may (besides supporting navigation to websites) use flashchart's own javascripts or let flashchart create javascripts to display your charts in a new way.
- Parameter "create_script" creates javascript for click-Events
- Javascript "show_modalchart" displays a modal window
- Javascript "save_image" saves/converts your chart as Image
- Javascript "print_page" converts chart to Image and calls print dialog (with Microsofts Internet Explorer print dialog is called directly)
- Javascript "click_parms"shows all available parameters, which are passed by Open FlashChart
- Javascript "test_click" helps for tests or for creation of popup and modal windows
Following pages show by samples, how you could use this new functionality of flashChart.
{tab Legends|primary}
Default Click-attributes for Legends (Keys)
You may create legends, (if your data contains multiple data groups) with flashChart's parameter "legend".
For pie charts legends are displayed, if you have set parameter "pie_legend" to "1"
(or globally via plugin parameter).
For each item of legend you may define an action via parameter "key_onclick".
If there is no "key_onclick" attribute found, flashChart will set and use default "toggle-visibility".
If you then click an item, the related chart element will be hidden or displayed.
Note: For stacked bar chart there is no default for "key_onclick".
{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 parameters for above sample:
{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 Navigate to Websites|primary}
Navigate to Websites (use URLs)
In this sample both parameter "onclick" und "key_onclick" are used to navigate to remote websites, which deal with "populating statistics in german countries". Both parameters are identically setup with a series of urls - a one to one relation for data entry and URL entry has been set. Also see this on flashchart's parameters below.
{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/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}
FlashChart's parameters for above sample:
{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 for Calling Popup-Windows
In following three samples a scenario is shown where statistics on revenues are displayed via charts. Instead of showing all charts together in one article we now display a single "parent" chart which then is used to call related charts by clicking chart elements or legend items ("drill in").
With this sample we use flashchart's own Javascript "show_modalchart".
Javascript "test_click" will be executed if you click a legend item or chart element and will illustrate
the usage and implementation of "show_modalchart".
Those charts which will be shown by clicking pie elements have bee created with
attributes "modal_chart" und "hide_chart".
This causes creation of HTML-resources for Popup-Windows and hiding the chart itself.
Naming for these HTML-resources is set via using passed parameters from OFC (Open Flash Chart).
Javascript "test_click" helps by showing how this is implemented.
Parameters passed by OFC to javascripts:
- Parameter 1: always chart-id (in sample "revenue")
- Parameter 2:
- Chart element: Index of elements (in sample "0", "1", or "2")
- Legend item: Name of Element (in sample "Frankfurt", "Stuttgart" or "Munic")
- Chart menu: Text of menu item
- Parameter 3: Y-value with line or radar charts, "null" with other chart types.
- Parameter 4: Joomla root in the form of "http://host-name/.."
From first two parameters will build a chartid for Modal Popups. E.g: for first pie slice ("Frankfurt")
parameter 1 is "revenue" and parameter 2 is "0" - result name is then "revenue_0".
All scripts are found in javascript library "flashchart.js" and located in directory "../media/plg_content_flashchart/js".
{flashchart title="Revenue by Location in January" width="100%" height="350" type="pie" pie_legend="1" right_legend="1" tooltip="in #label# revenue is #val#€" data="Frankfurt,Munic,Stuttgart/48000,46000,51000" bg_image="/media/plg_content_flashchart/images/sample_logo.png" key_onclick="click_parms,test_click,show_modalchart" onclick="show_modalchart,show_modalchart,click_parms"}revenue{/flashchart} {flashchart height="250" width="550" 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="Revenue in January - Frankfurt" tooltip="#key#: #val#€" right_legend="1" legend="Books,CDs,DVDs" x_legend="Week" }revenue_0{/flashchart} {flashchart height="250" width="550" 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="Revenue in January - Munic" tooltip="#key#: #val#€" right_legend="1" legend="Books,CDs,DVDs" x_legend="Week" }revenue_1{/flashchart} {flashchart height="250" width="550" 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="Revenue in January - Stuttgart" tooltip="#key#: #val#€ (Total #total#€)" right_legend="1" legend="Books,CDs,DVDs,Print" key_onclick=",,,print_page" x_legend="Woche" }revenue_Stuttgart{/flashchart}
FlashChart parameters for above sample:
{flashchart title="Revenue by Location in January" width="100%"
height="350" type="pie" pie_legend="1" right_legend="1"
tooltip="in #label# revenue is #val#€"
data="Frankfurt,Munic,Stuttgart/48000,46000,51000"
bg_image="/media/plg_content_flashchart/images/sample_logo.png"
key_onclick="click_parms,test_click,show_modalchart"
onclick="show_modalchart,show_modalchart,click_parms"}revenue{/flashchart}
{flashchart height="250" width="550" 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="Revenue in January - Frankfurt" tooltip="#key#: #val#€"
right_legend="1" legend="Books,CDs,DVDs" x_legend="Week" }revenue_0{/flashchart}
{flashchart height="250" width="550" 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="Revenue in January - Munic" tooltip="#key#: #val#€"
right_legend="1" legend="Books,CDs,DVDs" x_legend="Week" }revenue_1{/flashchart}
{flashchart height="250" width="550" 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="Revenue in January - Stuttgart"
tooltip="#key#: #val#€ (Total #total#€)" right_legend="1" legend="Books,CDs,DVDs,Print"
key_onclick=",,,print_page" x_legend="Woche" }revenue_Stuttgart{/flashchart}
{tab Script (create_script)|primary}
Use Parameter "create_script"
Instead displaying a Popup-Window,
you may replace one chart with another chart.
To implement this it is necessary to provide javascripts to do the job.
FlashChart helps with this via new parameter "create_script".
You then will place the names of created scripts into parmeters "onclick" and/or "key_onclick".
This sample displays a "parent" chart from which you may drill into three other charts,
which are hidden by setting parameter "hide_chart" to "1".
To be able to replace one chart by another it is important,
that all charts have been assigned the same chart-ID (here "revenue1").
...click to go back" legend="Books,CDs,DVDs" x_legend="Week" bg_image="/media/plg_content_flashchart/images/sample_logo.jpg"}revenue1{/flashchart} {flashchart height="350" width="100%" create_script="revenue_muenchen" hide_chart="1" onclick="revenue_total,revenue_total,revenue_total" bg_image="/media/plg_content_flashchart/images/sample_logo.png" data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400" title="Revenue in January - Munic" tooltip="#key#: #val#€
...click to go back" legend="Books,CDs,DVDs" x_legend="Week" }revenue1{/flashchart} {flashchart height="350" width="100%" create_script="revenue_stuttgart" hide_chart="1" type="bar_stack" rearrange_data="1" onclick="revenue_total" bg_image="/media/plg_content_flashchart/images/sample_logo.png" data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700" title="Revenue in January - Stuttgart" tooltip="#key#: #val#€ (Total #total#€)
...click to go back" legend="Books,CDs,DVDs,Print" key_onclick=",,,print_page" x_legend="Week" }revenue1{/flashchart}
FlashChart parameters for above sample:
{flashchart title="Revenue in January by Location" width="100%" height="350" type="pie"
right_legend="1" tooltip="in #label# revenue is #val#€"
data="Frankfurt,Munic,Stuttgart/48000,46000,51000"
bg_image="/media/plg_content_flashchart/images/sample_logo.png"
create_script="revenue_total"
key_onclick="revenue_frankfurt,revenue_muenchen,revenue_stuttgart"
onclick="revenue_frankfurt,revenue_muenchen,revenue_stuttgart"}revenue1{/flashchart}
{flashchart title="Revenue in January - Frankfurt" height="350" width="100%"
create_script="revenue_frankfurt" hide_chart="1"
onclick="revenue_total,revenue_total,revenue_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.png"
tooltip="#key#: #val#€ <br /><<br />...click to go back"
legend="Books,CDs,DVDs" x_legend="Week" }revenue1{/flashchart}
{flashchart title="Revenue in January - Munic" height="350" width="100%"
create_script="revenue_muenchen" hide_chart="1"
onclick="revenue_total,revenue_total,revenue_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.png"
tooltip="#key#: #val#€ <br /><br />...click to go back"
legend="Books,CDs,DVDs" x_legend="Week" }revenue1{/flashchart}
{flashchart title="Revenue in January - Stuttgart" height="350" width="100%"
create_script="revenue_stuttgart" hide_chart="1" type="bar_stack" rearrange_data="1"
onclick="revenue_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.png"
tooltip="#key#: #val#€ (Total #total#€)<br /><br />...click to go back"
legend="Books,CDs,DVDs,Print"
key_onclick=",,,print_page" x_legend="Week" }revenue1{/flashchart}
{tab Chart Menues|primary}
Usage of Chart Menues (parameter 'menu')
You may extend the functionality of "create_script" by creating a chart menu with parameter "menu".
Parameter "menu" will cause creation of a popup menu on the right top of your chart.
Each menu item consists of a menu text und a javascript name (separated by comma),
different menu-items are separated by the or-sign "|".
Also in this sample a "parent" chart is shown as a "starting chart",
all other charts are hidden via parameter "hide_chart" and replace each other via clicks on chart elements or menu items.
As in previous sample you must asure that all charts have assigned an identical chart-ID (here "revenue2").
FlashChart Parameters for above sample:
{flashchart title="Revenue in January by Location" width="100%" height="350"
create_script="revenue_all"
menu="Munic,revenue2_muenchen|Frankfurt,revenue2_frankfurt|Stuttgart,revenue2_stuttgart"
onclick="revenue2_frankfurt,revenue2_muenchen,revenue2_stuttgart"
type="pie" pie_legend="0" pie_label_values="1"
tooltip="revenue in #label#" dimension=" €"
bg_image="/media/plg_content_flashchart/images/sample_logo.png"
data="Frankfurt,Munic,Stuttgart/48000,46000,51000" }revenue2{/flashchart}
{flashchart title="Revenue in January - Frankfurt" height="350" width="100%"
create_script="revenue2_frankfurt" hide_chart="1" dimension=" €"
menu="all Locations,revenue_all|Munic,revenue2_muenchen|Stuttgart,revenue2_stuttgart|Print,print_page"
bg_image="/media/plg_content_flashchart/images/sample_logo.png"
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="Books,CDs,DVDs"
x_legend="Week" }revenue2{/flashchart}
{flashchart title="Revenue in January - Munic" height="350" width="100%"
create_script="revenue2_muenchen" hide_chart="1" dimension=" €"
menu="all Locations,revenue_all|Frankfurt,revenue2_frankfurt|Stuttgart,revenue2_stuttgart|Print,print_page"
bg_image="/media/plg_content_flashchart/images/sample_logo.png"
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="Books,CDs,DVDs"
x_legend="Week" }revenue2{/flashchart}
{flashchart title="Revenue in January - Stuttgart" height="350" width="100%"
create_script="revenue2_stuttgart" hide_chart="1"
type="bar_stack" show_barvalues="1" dimension=" €" rearrange_data="1"
menu="all Locations,revenue_all|Munic,revenue2_muenchen|Frankfurt,revenue2_frankfurt|Print,print_page"
bg_image="/media/plg_content_flashchart/images/sample_logo.png"
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="Books,CDs,DVDs"
x_legend="Week" }revenue2{/flashchart}
{/tabs}