Introduction

I used "amCharts" for two Java/Scala based WebApplications before and we are thinking about using it with DataFlex Web Applications as well.

Preview

This is a screenshot of the current Example-Workspace containing a few charts:

Example code

Here is an example on how the code of a chart looks like:

        // Define a chart object
        Object oSerialChart is a cAmSerialChart
            Set domID to "chartdiv"
            Set piColumnSpan to 12
            Set categoryField to "date" // tell the chart which field to use for the y-axis
            Set dataDateFormat to "DD.MM.YYYY"
            
            //Add a graph
            Object oGraph is a cAmGraph
                Set valueField to "sales" // tell the graph where data is located (which field contains the data for this graph?)
                Set id to "g1"
            End_Object

            //Add a scrollbar
            Object oChartScrollbar is a cAmChartScrollbar
                Set graph to "g1" // Which graph to use as a "preview"
            End_Object
            Object oCategoryAxis is a cAmCategoryAxis
                Set parseDates to True
            End_Object
            
            // Fill in some data:
            Function FillData Returns tAmAttributes[]
                Date oldDate
                Boolean bFound
                Number nSales
                tAmAttributes[] RetVal
                Send Clear of oOrderHea_DD
                Send Find of oOrderHea_DD GE Index.3
                Move (Found) to bFound
                Move OrderHea.Order_Date to oldDate
                While (bFound)
                    If (oldDate<>OrderHea.Order_Date) Begin
                        tAmAttributes entry
                        Send AddNVP "date" oldDate (&entry) // set the date for the y-axis (use the same name as defined in the chart-object)
                        Send AddNnp "sales" nSales (&entry) // add an entry for each of the graphs (make sure to use the same name as defined in the graph)
                        Move entry to RetVal[(SizeOfArray(RetVal))]

                        Move 0 to nSales
                        Move OrderHea.Order_Date to oldDate
                    End
                    Move (nSales + OrderHea.Order_Total) to nSales
                    Send Find of oOrderHea_DD GT Index.3
                    Move (Found) to bFound
                Loop
                
                
                Function_Return RetVal
            End_Function
        End_Object

Features

I created a library workspace which contains the classes needed to create a simple chart. I managed to integrate the JavaScript code into this library and The WebApp Framework can now load the JavaScript contained in my library.
Here's a list of what's currently working:

Different kinds of charts like

• Line charts
• Bar charts
• Pie charts
• xy (not yet fully implemented)
• Radar[FONT=Lato] (not yet fully implemented)
• Gantt (not yet fully implemented)
• Funnel[FONT=Lato] (not yet fully implemented)
• Gauge (not yet fully implemented)
• Map (not yet fully implemented)
• Stock (not yet fully implemented)

Events

• "Zoomed"-Event for line/bar charts
• others are on the ToDo list

DataFlex-Procedures/Functions to interact with the charts

• Zooming functions for line/bar charts
• showing/hiding Graphs
• highlighting/unhighlighting graphs

Library Workspace which does not require you to copy any HTML/CSS/JS files into your project (I hope to keep it that way...)



I use some older (read obsolete) DF-code to include the JavaScript code into the WebApp. It based on the old way to directly embed icons/graphics into the compiled program (thanks to Wil who showed me how to do it ).
Maybe someone from the community or someone at DAW has a better solution for this.

TODO / Known Issues

There is still very much to do:

• It takes 4 or 5 "ping pong"-calls form the client to the server and back in order to load the charts and fill them with data... this should be improved
• Only the custom parts of the script are included in the Library. The "main part" of the script is directly linked/loaded from the AmCharts-webserver. This needs to be changed... I'm hoping for a better solution to include JS-Files in a LibraryWorkspace though...
• No Web Properties are supported at the moment (so once your chart has been loaded, you can't manipulated it anymore...)
• No Events / Procedure are implemented, so no interaction between the user and the server is possible at the moment (the charts work fully interactive though... scrolling, zooming, hovering is supported)
• There are dozens of properties and a few more chart types which need to be implemented
• The class hierarchy is not completed yet...
• There are a few things which are rather ugly (-> custom structs for name value pair with different types than strings, although the WAF converts them to string values anyway...)

Snapshots / Zip files with the most current version

Current version of the library: https://github.com/ammoniak/amChartsDataFlexLibrary/archive/master.zip
Example workspace: https://github.com/ammoniak/amChartsDataFlexLibrary-Example/archive/master.zip

Repositories

Library:
https://github.com/ammoniak/amChartsDataFlexLibrary

Example / Demo Workspace (requires the library):
https://github.com/ammoniak/amChartsDataFlexLibrary-Example

In case you don't want to use git (or svn), there's a "Download as Zip"-Button on the repository page or use the direct link above

Download

AmChartsLibrary.zip
Quick Start AmCharts.zip

References

AmCharts homepage: http://www.amcharts.com/javascript-charts/

DAW forum: http://support.dataaccess.com/Forums/showthread.php?57320-amCharts-Library