Results 1 to 10 of 36

Thread: amCharts Library

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Jun 2011
    Location
    Switzerland
    Posts
    822

    Default amCharts Library

    AmCharts DataFlex/JavaScript-Wrapper

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

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




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

    Code:
          
            // 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 id ).
    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/amCharts...ive/master.zip
    Example workspace: https://github.com/ammoniak/amCharts...ive/master.zip

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

    Example / Demo Workspace (requires the library):
    https://github.com/ammoniak/amCharts...ibrary-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

    References

    AmCharts homepage: http://www.amcharts.com/javascript-charts/
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	amChartsExample.PNG 
Views:	409 
Size:	36.6 KB 
ID:	9318  
    Attached Files Attached Files
    Last edited by Raphael Theiler; 5-Oct-2015 at 08:52 AM. Reason: added link to the AmCharts homepage
    Currently working for transXpro (an online platform for a Swiss translation agency).
    Improved (unofficial) DataFlex Forum Search (now with SSL)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •