flashChart and modal Windows

Modal windows are intended to grab the user's full attention, once they are called from their parent window. Many interface designers have recently taken steps to make modal windows more obvious and user friendly by darkening the background behind the window or allowing any mouse click outside of the modal window to force the window to close.

Since version 1.1.8 of flashChart you now may show charts, images and other web-contents (html or text) within "modal windows".

Here are four samples, which have been created by flashChart (please cklick):

  • {flashchart data="50,60,70,80,90,60|109,120,100,130,140,100" modal_chart="a chart in a modal window" width="500" height="250" title="A simple chart"}sample1_popup{/flashchart}
  • {flashchart data="shadow_box" url="images/stories/mountains.jpg" title="An image shown in a Shadowbox" width="600" height="450"}sample1{/flashchart}
  • {flashchart data="popup_window" url="php-apps/flashchart/samples/sample004.php" title="HTML content in a Popup" width="650" height="500"}sample_004{/flashchart}
  • {flashchart data="shadow_box" url="/php-apps/flashchart/samples/sampleApp.php?lang=en" title="PHP-Application shown in a Shadowbox" width="650" height="345"}sample2{/flashchart}

    • For the use of modal windows within your articles you must have following prerequisits solved:

    1. For displaying modal windows you need javascript code
    2. You need (http)-Links pointing to your Popup Windows within your articles
    3. Popup Windows must have been created, means that the web-resource (HTML, Text, Image) for popup windows must be available.
    All this is supported by flashChart and will be explained and shown in detail with following samples.

    Provide HTTP-Link

    For the creation of a HTTP-link to your Popup window just code following flashChart Tags:
    1. modal_chart - create a chart in a modal window (also will create a http-link to it within your article)
      or
    2. data - type of popup window ("shadow_box" or "popup_window")
    3. title - this will be used to show up as a http-link within your article
    4. modal_title - if set a title will be displayed in head of popup
    5. url - this is the location (URL) of your web-resource for the popup window
    6. width - width of popup window in pixel
    7. height - height of popup window in pixel

    All web-Resources for following 2 samples have been created by me and have been uploaded (via FTP) to my site. For displaying these popup windows please click link (the "sample image").

    Sample 1: - show an image within a shadowbox: 
    {flashchart data="shadow_box" url="/images/stories/mountains.jpg" 
title="<img src='/media/plg_content_flashchart/images/sample.jpg' title='Sample 1'/>" 
width="600" height="450"}sample1{/flashchart}
    		{flashchart data="shadow_box" url="/images/stories/mountains.jpg" title="" width="600" height="450"}sample1{/flashchart}
    Sample 2: - Show a video from youtube within a popup window: 
    {flashchart data="popup_window" url="http://www.youtube.com/v/B-7jsURjLiU?version=3&autohide=1" 
title="<img src='media/plg_content_flashchart/images/sample.jpg' title='Sample 2'/>" 
modal_title="Build a Joomla Website in 1 Hour" 
width="600" height="350"}sample2{/flashchart}
    		{flashchart data="popup_window" url="http://www.youtube.com/v/B-7jsURjLiU?version=3&autohide=1" title="" width="600" height="350" modal_title="Build a Joomla Website in 1 Hour" }sample2{/flashchart}
    Sample 3: - Show a chart in a modal window: 
    {flashchart height="350" width="550" data="database"
     modal_chart="<img src='/media/plg_content_flashchart/images/sample.jpg' 
title='Sample 3'/>"
    sql="Select title, hits From jos_content Order By hits Desc Limit 10"
    type="bar_dome" tooltip="#val# Hits" title="Most read Articles"
modal_title="A Chart in a Modal Window"
 x_label_rotate="50" 
    label_fontsize="11"  multibar_color="1"}sample003{/flashchart}
    		{flashchart height="350" width="550" data="database" sql="Select title, hits From jos_content Order By hits Desc Limit 10" type="bar_dome" tooltip="#val# Hits" title="Most read Articles" x_label_rotate="50" modal_chart="" multibar_color="1" label_fontsize="10" modal_title="A Chart in a Modal Window"}sample003{/flashchart}
    Important: Take care of correct single and double quotes in "title" or "modal_chart" tags, if you want to create a link (as shown in samples) with an image.