revUp - Updates and news for the LiveCode community
Issue 105 | Feb 24th 2011 Contact the Editor | How to Contribute

Reports That Steal The Show - Part 2
Using FusionCharts to generate full featured reports

By William Roger Moseid


This article, the second in a series of 3, is further examination of the FusionCharts for LiveCode application which uses the SpecialFolders Path, CustomProperties and revBrowser functions to render charts in LiveCode. In this article I'll show how this portion of the file, Cards: Chart, Chart Fields and Chart ImportExport, was created and runs in the Mac and Windows environments. You can read article one here.

The Chart card was constructed so the user can select one of 10 chart types for rendering as well as controlling, via a dropdown button and radio buttons, the following:

  • Chart Type (Area2D, Bar2D, Column2D, Column3D, Doughnut2D, Doughnut3D, Funnel, Pie2D,
  • Pie3D, Pyramid
  • Chart Types
  • Chart Animation (Yes/No)
  • Chart ToolTips (Yes/No)
  • Slice Funnel/Pyramid Segments (Yes/No)
  • Separate Funnel Segments (Yes/No)

chart1

Figure 1 - Card Chart, Bar2D

This chart is 1 of the 8 types listed below. The objects shown on the screen, Chart Type, Animation and Chart ToolTips are visible for all chart types.

  • Chart Types (No Funnel or Pyramid) & Aspects
  • Chart ToolTips (Yes/No)
  • Slice Funnel/Pyramid Segments (Yes/No)
  • Area2D, Bar2D, Column2D, Column3D, Doughnut2D, Doughnut3D, Pie2D, Pie3D
  • Slice Funnel/Pyramid Segments (Yes/No)
  • Chart ToolTips (Yes/No) For Chart ToolTip

chart2

Figure 2 - Card Chart, Type - Funnel 1

Slice Funnel = No (No Chart Segment Slicing)

image3

Figure 3 - Card Chart, Type - Funnel 2

Slice Funnel = Yes (Slice Funnel Segments)
Separate Funnel = Yes (Separate Chart Segments)

figure4

Figure 4 - Card Chart, Type - Funnel 3

Slice Funnel = Yes (Slice Funnel Segments)
Separate Funnel = No (No Funnel Segment Separation)

figure5

Figure 5 - Card Chart, Type - Pyramid 1

Slice Pyramid = No (No Pyramid Chart Segments Slicing)

image6

Figure 6 - Card: Chart, Type - Pyramid 2

Slice Pyramid = Yes (Slice Pyramid Chart Segments)


Card: Chart - Invisible Objects
On the LiveCode ToolBar, click View/Show Invisible Objects. The now visible buttons: Set Browser Addr, Browser Open, Browser Close and Test Chart are used for Developer testing. The Show Project Info button, below, is revealed by clicking the Gold/Blue bar under the Chart Tab. Clicking that button will display, via the Message Box, the Project Info in the stack listed by card. The field, ShowProjectInfoState(1-7), below, is normally hidden and is used as an object whose contents (top/bottom) specify whether the Show Project Info button will be show or hidden.

image7

Figure 7 - Card: Chart - Show Invisible Objects

/--
-- Author: William Roger Moseid
-- Creation Date: 06/24/2010
-- About This Scripts
-- Show Button "Show Project Info"
-- History
-- Modifier: <First Middle Last Names>
-- Date: mm/dd/yyyy
-- /
on mouseUp
   If "bottom" is in fld "ShowProjectInfoState2" then
       put "top" into fld "ShowProjectInfoState2"
       show btn "Show Project Info"
       exit mouseUp
   end if
   If "top" is in fld "ShowProjectInfoState2" then
       put "bottom" into fld "ShowProjectInfoState2"
       hide btn"Show Project Info"
   end if
end mouseUp

Figure - 8 - Hide/Show Project Info Field Control Script

Card: Chart Fields
These fields define the chart content and demographics. Field content is assembled into a URL string then sent to the revBrowser object which renders the chart. This card contains the Browser Address Handler script, called by the makeChart script in the Card: Chart. The script assembles the URL string then sets it into the browserAddress field in this card as well as the browserAddress field located in the Chart card, under the DarkBar and LiteBar objects.

image9

Figure 9 - Card: Chart Fields


Chart Fields

Field0

FusionCharts FCPathPrefix

Field1A

Mac/Win FusionCharts Export Path

Field1B

HTML designator and Chart Type Prefix

ChartType

FusionCharts Type Name, i.e. Bar2D, etc.

Field2

Chart Caption, SubCaption

Animation

;animation=

Animate

1 = Yes, 0 = No

ToolTips

;showHoverCap=

ToolTip

1 = Yes, 0 = No

Field3

Chart X, Y Axis Names, Scaling

Slice Funnel/Pyramid

;isSliced=

Sliced

1 = Yes, 0 = No

Funnel

;isHollow=

SepFunnel

1 = Yes, 0 = No

Field4

Chart Demographics

browserAddress

URL String for Chart Rendering


Figure 10 - Chart Fields - Field Definitions

Card: Charts ImportExport
This card manages FusionCharts ImportExport. This process was covered in a previous RevUp article, FusionCharts ImportExport. The purpose is to import the required FusionChart files which are then stored in a Custom Property. These files are then exported to a TemporaryFolder. The content of this TemporaryFolder is identified in the URL string passed to the revBrowser object, located on Card: Chart, to render the user selected chart type and aspects.

image11

Figure 11 - Card Charts ImportExport

Get Pro FileName List Button: If the highlight is false:
ToolTip Displayed: "Click Here To Import The FusionCharts FileNames Into The Pro Filename List"
Get Pro FileName List Button: If the highlight is true:
ToolTip Displayed: "Click Here To load The Pro FileName List"

When clicked, this button will:

  • Ask the user to identify the Import FusionCharts folder
  • If the folder is not found, the user is advised
  • If the FusionCharts Import folder is found:
  • Set the imported File Name List as a ToolTip into the "Pro FileName List" button
  • Set ToolTips into the "Get Pro FileName List" and "Erase FileName List" buttons
  • The "Get Pro File Names List", "Pro FileName List" and "Erase FileName List" buttons highlights are set to true

This action provides visual feedback of the processing to the user.


/-- Author: Mark Weider, William Roger Moseid
-- Creation Date: 04/03/2010
-- About This Script:
-- Get FusionCharts Pro FileNames Handler
-- History
-- Modifier: William Roger Moseid
-- Date: 06/05/2010
-- Added Script Header & Comments
-- Added Answer Folder Logic
-- Added FusionCharts Folder ID Check
-- Removed DropShadow Visual Feedback Logic
-- Added Button Gold/Blue Highlight Logic
--/
on mouseUp
   local tMyPath,tMyFile,tThemFiles
   -- Set User Visual Feedback File Name List Access Is Started
   set the highlight of Btn "Get Pro FileName List" to false
    set the highlight of Btn "Pro FileName List" to false
    set the highlight of btn "Erase Pro FileName List" to false
   -- Clear Out Any Previous File Names
    put empty into button "Pro FileName List"
   -- Set User Visual Feedback File Name List Access Is Started
    set the highlight of Btn "Get Pro FileName List" to false
   -- Query User To Select FusionCharts Import Folder
    Answer Folder "Select ProFiles Folder"
    put it into tMyPath
    set the defaultFolder to tMyPath
    set Folder to tMyPath
   -- Make Sure Ihe FusionCharts Folder Really Exists
   if there is a folder tMyPath then
      -- Get The List Of Files In The Source Directory
       put folder_content(tMyPath) into tMyFiles
      -- Is It A FusionCharts Import Folder?
      If "FCColors" is not in tMyFiles then
         answer "Pro FusionCharts Import Folder Not Found"
      else
         -- Filter System File If Mac
         if "Mac" is in the platform then
            -- Clear Mac System File Name
             filter tmyfiles without ".DS_Store"
         end if 
          put tMyFiles into button "Get Pro FileName List"
          set the ToolTip of Btn "Pro FileName List" to tMyFiles
         -- Set FusionCharts Selected Folder Path
          put tMyPath into Fld "theProFilePath"
         wait 1 sec
         -- Setup User Visual Feedback That FileName List Is Obtained
          set the highlight of Btn "Get Pro FileName List" to true
          set the highlight of Btn "Pro FileName List" to true
          set the highlight of Btn "Erase Pro FileName List" to true
          set the ToolTip of Btn "Erase Pro FileName List" to \
                "Click Here To Erase" & cr & "The Pro FileName List"
          set the toolTip of Btn "Get Pro FileName List" to \
                "Click Here To Reload" & cr & "The Pro FileName List"
         -- Restore Cursor After Accessing FusionCharts Import Folder
          set the cursor to hand
          set the lockCursor to true
       end if
   end if
end mouseUp

Figure 12 - Get FusionCharts FileName List

-----------------------------------------------------------------------------------------------------------------

Pro FileName List Button: When the mouse hovers over this button and the highlight is true

  • The ToolTip is not displayed

Pro FileName List Button: When the mouse hovers over this button and the highlight is true

  • The ToolTip displays the FusionCharts filenames as a list

This action provides visual feedback of the processing to the user.

Erase FileName List Button: When the mouse hovers over this button and the highlight is true

  • The ToolTip displays "Click Here To Erase The Pro File Name List"

Erase FileName List Button: When the mouse hovers over this button and the highlight is false

  • The ToolTip is not displayed

Erase File Name List Button. When clicked, this button will:

  • Set the "Get File Name List", "File Name List" and "Erase File Names" buttons highlights to false
  • Delete ToolTips in buttons: Pro FileName List, Erase Pro FileName List and itself


This action provides visual feedback processing to the user


/-- Author: William Roger Moseid
-- Creation Date: 04/03/2010
-- Erase Pro FileName List Handler:
-- Erases File Name List In Btn File Name List ToolTip
-- Sets Btn File Name List ToolTip To Empty
-- Set Btn Erase File Name List Highlight To False
-- History
-- Modifier: William Roger Moseid
-- Date: 07/23/2010
-- Added Script Header & Comments
-- Deleted DropShadow Logic
-- Modified Tool Tip Logic
--/
on mouseUp
   -- Show User FileName List, ToolTip, Highlight & DropShadows
   -- Erased
    set the highlight of Btn "Get Pro FileName List" to false
    set the highlight of Btn "Pro FileName List" to false
    set the highlight of Btn "Erase Pro FileName List" to false
    set the ToolTip of Btn "Get Pro FileName List" to \
          "Click Here To Import" & cr & "The FusionCharts" \
 & cr & "FileNames Into The"& cr & "Pro Filename List"
    set the toolTip of btn "Pro FileName List" to empty
    set the toolTip of btn "Erase Pro FileName List" to empty
end mouseUp

Figure 13 - Erase FileName List

-----------------------------------------------------------------------------------------------------------------
Import FusionCharts Files Button: When the mouse hovers over this button button and the highlight is false

  • The ToolTip is not displayed

Import FusionCharts Files Button: When the mouse hovers over this button and the highlight is true

  • The ToolTip displays the quantity of imported FusionCharts

When clicked, this button will:

  • Set the "Import Pro FusionCharts Files", "# of Pro Files Imported" and
  • "Erase Files Imported #" buttons highlights to false
  • Import The FusionCharts Files into the CustomProperties "cProChartFiles"
  • Set ToolTips in buttons, Import Pro FusionCharts Files, "# of Pro Files Imported and itself

This action provides visual feedback processing to the user
------------------------------------------------------------------------------------------------------------------

-- Author: Mark Weider, William Roger Moseid
-- Creation Date: 04/03/2010
-- About This Script:
--Handler: Import FusionCharts File Handler
--Inputs 19 FusionCharts files into This Stack in the Custom
-- Property Set: cChartFiles
--URL: tFilePath is the Source Of The FusionCharts Files
--FldSFPath is the Destination Of The FusionCharts Files
-- History
-- Modifier: William Roger Moseid
-- Date: 08/14/2010
-- Added Script Header & Comments
-- Added tCount For Amount Of Files Imported
-- Added Logic For::
--Highlight Control for Buttons:
-- "Get File Names List", "Import FusionCharts Files",
-- ExportFusionCHarts Files
--Skins & ToolTips for Buttons:
-- "Pro FileName List", "# of Pro Files Imported",
# "# of ProFiles Exported"
-- "Erase FileName List", "Erase Files Imported #",
# "Erase Files Exported #"
--/
on mouseUp
   local tProChartFolder, tProFileName, tProFilePath, tProCharts, \
          tProCount, tAllCustomProperties
   -- Alert User File Import Has Started
    set the highlight of btn "Import ProFusionCharts Files" to \
          false
    set the highlight of btn "# of Pro Files Imported" to false
    set the highlight of btn "Erase Pro Files Imported #" to false
    wait 1 sec
   -- Clear Out All Files From The Previous Import
    put the custompropertysets of this stack into \
          tAllCustomProperties
    filter tAllCustomProperties without "cProChartFiles"
    set the custompropertysets of this stack to \
          tAllCustomProperties
    put field "theProFilePath" into tProChartFolder
   -- Get The List Of Files To Import
    put folder_content(field "theProFilePath") into tProCharts
   if "Mac" is in the platform then
      -- Clear System File Name
       filter tProCharts without ".DS_Store"
   end if
   -- Import FusionCharts Files
   repeat for each line tFileName in tProCharts
       put tProChartFolder & "/" & tFileName into tProFilePath
      -- Store Each File &
      -- Compress Files To Reduce Stack Space
       set the cProChartFiles[tFileName] of this stack to \
             compress(url ("binfile:" & tProFilePath))
       add 1 to tProCount
   end repeat
   -- Set ToolTips For Btn "# Of Files Imported" To Empty,
   # ToolTips In Btn "# of Pro Files Imported"
    set the ToolTip of Btn "Erase Pro Files Imported #" to \
          "Click Here To Erase" & cr & "Pro Files Imported #"
    set the ToolTip of Btn "# of Pro Files Imported" to tProCount \
          & " Pro Files" & cr & "Imported"
    set the ToolTip of Btn "Import Pro FusionCharts Files" to \
          "Click Here To Reload" & cr & "The Pro FusionCharts Files"
   -- Alert User: File Import Completed: Visual Feedback
    set the highlight of btn "Import ProFusionCharts Files" to true
    set the highlight of btn "# of Pro Files Imported" to true
    set the highlight of btn "Erase Pro Files Imported #" to true
end mouseUp

Figure 14 - Import FusionCharts Files

Number of Pro Files Imported Button: When the mouse hovers over this button and the highlight is false

  • No ToolTip is displayed

Number of Pro Files Imported Button: When the mouse hovers over this button and the highlight is true

  • The ToolTip displays the number of FusionCharts Files imported

This action provides visual feedback of the processing to the user.

Erase Files Imported # When clicked, this button will:

  • Set the "Import Pro FusionCharts Files", "# of Pro Files Imported" buttons highlights to false
  • Set"Erase Pro Files Imported #" button highlight to false
  • Set ToolTips in buttons, the "Import Pro FusionCharts Files", "# of Pro Files Imported" and itself

This action provides visual feedback processing to the user

/-- Author: William Roger Moseid
-- Creation Date: 04/03/2010
-- About This Script: Erase Files Imported
-- Erases Btn Import FusionCharts Files Highlight
-- Erases Btn # of Files Imported ToolTup
-- Erases Btn # of Files Imported DropShadow
-- Erases Btn Erase Files Imported DropShadow
-- History
-- Modifier: William Roger Moseid
 -- Date: 06/23/2010
-- Added Script Header & Comments
-- Deleted Erase DropShadow Logic
-- Added Btn Highlight Logic
--/
on mouseUp
   -- Show User: # of Files Imported, ToolTip, Highlight &
   # DropShadows Erased
   set the highlight of Btn "Import Pro FusionCharts Files" to \
          false
   set the highlight of btn "# of Pro Files Imported" to False
   set the highlight of btn "Erase Pro Files Imported #" to False
    set the ToolTip of Btn "Import Pro FusionCharts Files" to \
          "Click Here To Import" & cr & "Pro FusionCharts Files"
   set the toolTip of Btn "Erase Pro Files Imported #" to empty
    set the toolTip of Btn "# of Pro Files Imported" to empty
end mouseUp

Figure 15 - Erase Files Imported

Export Pro FusionCharts Files: When the mouse hovers over this button and highlight is false.

"Click Here To Export The FusionCharts Files to the SpecialFolders folder", is displayed

When clicked, this button will:

  • Set the "Export Pro FusionCharts Files" , "# of Pro Files Exported"and "Erase Pro Files Exported #" button highlights are set to false,
  • Export FusionCharts files into the Temporary Folder
  • Example: C:/Users/Bill/AppData/Local/Temp/S10.1/

Export Pro FusionCharts Files: When the mouse hovers over this button and highlight is true.

  • "Click Here To ReExport The FusionCharts Files", is displayed

When this button is clicked:

  • Set ToolTips into buttons, "Export Pro FusionCharts Files, # of Pro Files Exported" and "Erase Pro Files Exported #"
  • Set the # of Pro Files Exported" and "Erase Pro Files Exported #" buttons highlights and itself to true.

This action provides visual feedback processing to the user.


/-- Author: William Roger Moseid
-- Creation Date: 04/03/2010
-- About This Script:
-- Handler: Export FusionCharts Files
-- Exports 19 FusionCharts Files From This Stack in the
-- Custom Property Set: cChartFiles
-- FldSFPath is the Source Of The FusionCharts Files
-- URL: tFilePath is the Destination Of The FusionCharts Files
-- History
-- Modifier: William Roger Moseid
-- Date: 09/11/2010
-- Added Script Header & Comments
-- Added tCount For # Of Files Exported & Set Empty Into
# tCount, Before Export
-- Deleted DropShadow Logic (User Visual Progress Feed Back)
-- Added Btn Hilite Logic (User Visual Import/Export Progress
-- Feed Back To The User)
-- Modified Create Folder Logic To Handle Win/Mac
--/
--> Export All FusionChart Files Handler
-- Will Be Appended To Export File Path
constant kDestinationFolder = "/Temp/"
on mouseUp
   global tCount, tKeys, tPath, tFilePath, tFileFolder,
   -- Setup Visual Export File Progress To User
    set the highlight of btn "# of Pro Files Exported" to false
    set the highlight of btn "Erase Pro Files Exported #" to false
   --wait for 3 seconds
    set the highlight of btn "Export Pro FusionCharts Files" to \
          false
   -- The Mac & Win Systems Will Create Destination Folder(s) If
   -- They Don't Exist
   -- If They Do Exist, The System Does Nothing
   -- Create Folder specialFolderPath(fld "SF#_Code") &
   # "/Temp/S10.1/"
    put specialFolderPath(fld "SF#_Code" of card \
          "Charts ImportExport" of this stack) &  \
 kDestinationFolder into tFileFolder
   -- Create First Destination Folder
    create Folder specialFolderPath(fld "SF#_Code" of card \
          "Charts ImportExport" of this stack ) & kDestinationFolder
   -- Create Second Destination Folder
   create Folder specialFolderPath(fld \
          "SF#_Codeof this stack ) & kDestinationFolder & "S10.1/"
   -- Setup Visual Export File Progress To User
    set the highlight of btn "Export Pro FusionCharts Files" to \
          false
   -- Allow The User To See Highlight Change
   wait for 1 seconds
   -- Assemble The Export URL For Mac/Win
    put specialFolderPath(fld "SF#_Code" of card \
          "Charts ImportExport" of this stack ) &  \
kDestinationFolder & "S10.1/" into tFilePath
   -- Display Destination Path
    put tFilePath into fld "FldSFPathof this stack 
    put tFilePath into fld "Field1A" of this stack
   -- Export FusionCharts Files
   -- Get File List Stored In CustomProperties
    put the customkeys["cProChartFiles"] of this stack into tKeys
    put empty into tCount
    repeat for each line tLine in tKeys
      -- Decompress Files During Export
      -- (Compressed File During Import Into CustomProperties)
      put decompress(the cChartFiles[tLine] of this stack ) into \
             URL ("binfile:" & tFilePath & tLine)
       add 1 to tCount
   end repeat
    set the ToolTip of Btn "# of Pro Files Exported" to tCount & \
          " Pro Files" & cr & "Exported"
   -- Visual Feedback To User File Export Completed
    set the ToolTip of Btn "Export Pro FusionCharts Files" to \
          "Click Here To ReExport" & cr & "The Pro FusionCharts Files"
    set the highlight of btn "Export Pro FusionCharts Files" to \
          true
    set the highlight of btn "# of Pro Files Exported" to true
    set the highlight of btn "Erase Pro Files Exported #" to true
    set the ToolTip of Btn "Erase Pro Files Exported #" to \
          "Click Here To Erase" & cr & "The Pro Files" & cr & "Exported #"
end mouseUp

Figure 16 - Export FusionCharts Files

# of Pro Files Exported Button: When the mouse hovers over this button

  • The ToolTip displays the number of FusionCharts Files exported

This action provides visual feedback of the processing to the user.

Erase Files Exported # When clicked, this button will:

  • Set the "Export Pro FusionCharts Files", "# of Pro Files Exported" and "Erase Pro Files Exported #" buttons highlights to false
  • Set ToolTips in buttons, the "Export Pro FusionCharts Files", "# of Pro Files Exported" and itself

This action provides visual feedback processing to the user
/-- Author: William Roger Moseid
-- Creation Date: 04/03/2010
-- About This Script:
-- Erases Btn Export FusionCharts Files Highlight
-- Erases Btn # of Files Exported
-- Erases Btn # of Files Exported DropShadow
-- Erases Btn Erase File Name List Exported # DropShadow
-- History
-- Modifier: William Roger Moseid
-- Date: 09/01/2010
-- Added Script Header & Comments
-- Added/Modified Tool Tip Logic
-- Deleted Erase DropShadow Logic
-- Added BTN highlight Logic
--/
on mouseUp
   -- Show User: Files Exported, ToolTipa, Highlights Erased
    set the highlight of Btn "Export Pro FusionCharts Files" to \
          false
    set the ToolTip of Btn "Export Pro FusionCharts Files" to \
          "Click Here To Export" & cr & "FusionCharts To The"  \
& cr & "SpecialFolders Folder"
    set the toolTip of Btn "# of Pro Files Exported" to empty 
    set the highlight of btn "# of Pro Files Exported" to false
    set the highlight of btn "Erase Pro Files Exported #" to false
end mouseUp

Figure 17 - Erase Files Exported # Files

Conclusion
The SpecialFolders, CustomProperties and revBrowser features in this article, enable LiveCode developers to quickly and easily modify their stack files in order to take advantage of this charting.

In article 3, I'll show how card Button Overlay Images was created and then used to populate card buttons and image skins with white, blue and gold colors. Lastly, cards GUI Architecture I and II which illustrate the file GUI are discussed.

 

William Moseid

About the Author

William Roger Moseid is president of fmpsolutions, and a "newbie" LiveCode developer. More articles will follow.

Main Menu

What's New

Android Arrives