VDF-GUIdance logo

  Visual DataFlex Logo

Shared knowledge leads to accumulated knowledge

        Printer Friendly Page

AmCharts DataFlex Wrapper for WebApps

by Raphael Theiler


AmCharts is a JavaScript based library to create charts in web applications. This project contains wrapper classes in order to use AmCharts inside DataFlex WebApps. The library is self contained and includes a "new" way to load the JavaScript which does not requires the modification of html or JavaScript files of your projects. Simply include the library Workspace and everything works fine.

Code/Repository: https://github.com/ammoniak/amChartsDataFlexLibrary
Size: 4550 KB Download
Date Created: 06/10/2015
Date Updated: 06/10/2015
Author: Raphael Theiler
Company: transXpro


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


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"

            //Add a scrollbar
            Object oChartScrollbar is a cAmChartScrollbar
                Set graph to "g1" // Which graph to use as a "preview"
            Object oCategoryAxis is a cAmCategoryAxis
                Set parseDates to True
            // 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
                    Move (nSales + OrderHea.Order_Total) to nSales
                    Send Find of oOrderHea_DD GT Index.3
                    Move (Found) to bFound
                Function_Return RetVal


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)

  • "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



Example / Demo Workspace (requires the library):

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


Quick Start AmCharts.zip


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

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