Page 1 of 4 1234 LastLast
Results 1 to 10 of 35

Thread: amCharts Library

Hybrid View

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

    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:	259 
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)

  2. #2
    Join Date
    Nov 2008
    Location
    Round Rock, TX
    Posts
    8,096

    Default Re: amCharts Library


  3. #3
    Join Date
    Feb 2009
    Location
    Copenhagen, Denmark
    Posts
    1,866

    Default Re: amCharts Library

    That is brilliant! Thank you for sharing.

    I'll spend some time with that code for sure. Apart from becoming a really nice graph component, it is also a completely new way of interacting with javascript.

    -Sture

  4. #4
    Join Date
    Jun 2011
    Location
    Switzerland
    Posts
    725

    Default Re: amCharts Library

    Thank you Sture.

    I'm not sure how my approach will perform in the end. Using "eval" in JavaScript to compile more JS code makes it difficult to debug code.

    My goal is to find a way to serve the JS code through a WebService or something similar, so we can use something like "RequireJS" to load the code asynchronous. (There's an example on how to use RequireJS with the charts-lirary I'm using: http://www.amcharts.com/tutorials/am...ets-requirejs/ )
    This seems to be the right way to do it... I would not mind of DAW provides something similar (or adds support for RequireJS?) in a future version of the WAF. (-> Yet another feature request )

    Can WebServices return a raw string as data (without adding quotes or escaping anything)?

    Also:
    I put the code on GitHub, in case anyone wants to use the newest version, etc:

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

    Example / Demo:
    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 page.
    Currently working for transXpro (an online platform for a Swiss translation agency).
    Improved (unofficial) DataFlex Forum Search (now with SSL)

  5. #5

    Default Re: amCharts Library

    Awesome!

  6. #6
    Join Date
    Jun 2011
    Location
    Switzerland
    Posts
    725

    Default Re: amCharts Library

    Thanks wil.

    A little status update:
    - I added a few DataFlex-procedures to "zoom" into the charts and an Event which is fired if the user zooms manually.
    - The example was extended
    - I'm thinking about implementing Gantt-Charts, I'm not sure if there is actual need for those...
    - Functions to show/hide individual graphs (without removing them) has been added.
    Currently working for transXpro (an online platform for a Swiss translation agency).
    Improved (unofficial) DataFlex Forum Search (now with SSL)

  7. #7
    Join Date
    Feb 2009
    Location
    Beekdaelen-Nuth, Netherlands
    Posts
    1,095

    Default Re: amCharts Library

    Hello Raphael,

    Thanks Mate....

    Roel

  8. #8
    Join Date
    Jun 2011
    Location
    Switzerland
    Posts
    725

    Default Re: amCharts Library

    Thanks Roel.

    I just updated the code in the repository and added Leif's changes (-> OnClick-Event for SerialCharts).

    If anyone implements more stuff I'd be happy to add it to the library/repository :-)
    (Either make a pull-request on github, or send an email ... or post it here)
    Currently working for transXpro (an online platform for a Swiss translation agency).
    Improved (unofficial) DataFlex Forum Search (now with SSL)

  9. #9
    Join Date
    Jun 2011
    Location
    Switzerland
    Posts
    725

    Default Re: amCharts Library

    I added a new workspace file for DataFlex 18.2. Works fine. Even with mobile applications:

    Click image for larger version. 

Name:	Mobile-18.2.PNG 
Views:	331 
Size:	93.7 KB 
ID:	9424
    (click image to enlarge)
    Currently working for transXpro (an online platform for a Swiss translation agency).
    Improved (unofficial) DataFlex Forum Search (now with SSL)

  10. #10
    Join Date
    Jul 2010
    Location
    São Paulo/Brazil
    Posts
    147

    Default Re: amCharts Library

    Hi,

    Is it possible to use this library in Windows applications or just Web applications?

    Regards
    Fernando

Posting Permissions

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