This article was brought to you by the guys from VDF-GUIdance.
For more DataFlex targeted articles see http://www.vdf-guidance.com


AmCharts DataFlex Wrapper for WebApps

by Raphael Theiler

Summary

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


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