Flash Charting

Frustrated by the limitations of the commercial and open source charting packages I developed this flash charting library. Flash is ideal for the high quality and interactivity I desired. Below are a few demos. If you like what you see, and have need for this kind of high-end data presentation and advanced data mining, I would be delighted to discuss your project.

NEW: The library is now released as an open source ActionScript 2 library. It is at http://dcflash.sourceforge.net/. Version 0.1.0 was released end November 2006, and contains the low-level classes and then higher-level classes for making the pie charts and node graphs you can see below. I still a number of classes to donate to the library over the coming months. Please let me know if you are interested in something in particular. (People wishing to sponser development will be given a very warm welcome!)


3D Pie Chart Demo
3D Pie Chart Demo

3D Pie Chart Demo
  • Rotate it, tilt it, expand out the slices, experiment with transparency and different parts of the 3D effect. Both the user interface and the labels are available in English and Japanese.

  • Sample data sources hard-coded, but could easily come from a live back-end data source. Drilling down into your data is very possible, for instance.

  • User interface done using aswing library, see http://osflash.org/aswing/. The SWF is 98KB, but most of that is the user interface, which also requires at least Flash 7. With the UI stripped out the pie chart is a mere 6300 bytes and also supports Flash 6!!

  • NOTE: work in progress; if you'd like to be informed of updates please let me know at darren@dcook.org.

MLSN Graph (car)
MLSN Graph
Live application: please use username "guest", password "guest"

MLSN Graph (ear)
  • This is for interactive network visualization. You can drag nodes, mouseover for more information, and each node has a link to the web page to edit its data. English/Japanese.

  • The application is MLSN, which stands for MultiLingual Semantic Network. This is an open source project to make a database storing the relationships between words, for each of English and Japanese (other languages planned).

  • The underlying library is just as applicable to other types of network, such as computer networks, or software inheritance diagrams.

  • NOTE: work in progress; if you'd like to be informed of updates please let me know at darren@dcook.org.

Financial Charts: candles, bollinger, stochastics

Financial Charts: 5m candles
This demo is derived from a commercial project to create a fully fledged charting package for professional traders. It uses flash with XML sockets to push ticks (from four different exchanges) to the users as they happen and update the charts in real-time. Click here for more screenshots.

Latest Candlestick charting demo
Latest Candlestick charting demo

Candlestick charting demo
Older Candlestick charting demo
  • Updating from a live data source every 15 seconds (pseudo-live: the server is playing back a recording of 24hrs of data from July 31st 2004).

  • Candlesticks are at 1 minute spacing, made from four 15 second data items.

  • The green shaded region is the bollinger band - clearer than just drawing the two lines. The thick green line is a 20-minute moving average.

  • Press each of A, B, C, D and E to see different charting styles (click the charts anywhere first to make sure it has keyboard focus).


Exchange rate charting demo (quarterly data)
View Quarterly Data Demo (30Kb)

Exchange rate charting demo (monthly data)
View Monthly Data Demo (30Kb)
  • Highly interactive - mouseover hilights and sound allow you to feel your data!

  • Attractive - present professionally to your clients.

  • i18n-ready (this demo shows Japanese and English).

  • Compact (these demos are a mere 30Kb even with data embedded!).

  • Can connect to any back-end database, using XML, CSV or Flash Remoting.

  • Supports all major server-side languages (Java, PHP, C++, .NET, Cold Fusion, perl and more!).

  • Multi-dimensional with additional visual cues - pick out trends you miss with plain 2D charts and tedious tables of numbers.

  • Interconnected charts simultaneously show different views of the same data.

  • Work with live data. Drill down into your data.



Further Discussion

Applications. I have in mind three key applications, which cover a broad range.

First, financial data analysis, where identifying patterns, trends and anomolies can make or break a trader.

Second, marketing data presentations, presenting results attractively, and allowing drill-downs to understand your customers better.

Third, systems and network monitoring where status and load can be presented so that potential problems can be quickly identified and nipped in the bud.

Cross-Platform Flash. These demos were created almost entirely in actionscript for FlashMX. There are standalone clients available for Windows, Mac and Linux and web browser plug-ins available for Internet Explorer, Firefox, Netscape, Mozilla and others.

Offering Integration. I am not selling components or an actionscript library. Instead I am offering my services to integrate this into your front-end, and offering data extraction/mining for your back-end. I am also available for other flash and non-flash programming projects (see my main work page).

Data. For simplicity the data is embedded in this demo, but I have other examples that use server-side PHP to extra data from an SQL database then send it as XML to the flash front-end (converting Japanese from shift-jis to unicode as it goes); alternatively CSV data can be sent. Perhaps most powerful of all is using Flash Remoting allowing not just efficient passing of the data from server to client, but also easily integrating other web services in the front end.

Presentation Choices. This charting package stems out of my interest in presenting complex, multi-dimensional data. In addition to the three obvious dimensions, and the view of the "internal" data in the right pane, different colours can also be used for each bar, differing levels of transparency, colour and transparency gradients, bars can be stacked, multiple bars can be placed in one cell, bar width can change, different sound effects can be triggered as you move the mouse over, labels can be attached to bars, varying bar shapes can be used (for instance the pyramid in the demo) and more.

For most applications you will soon reach data overload if trying to present too many dimensions in one go. But one can imagine complex financial applications where the operator would be willing to spend time training their intuition so they can quickly spot anomalies in the data.

2D Charts. My charting package contains the standard chart types as well, from pie charts to candlestick with moving averages, events and technical analysis added. Dragging graph regions to zoom in on the data is possible. Text news feeds and even streaming in movies is possible.





 



Go to: Work: Top Page * Personal Home page   *   Email me at: darren@dcook.org  *   PGP Public Key

Last updated: 16th December 2006, © Copyright Darren Cook, 2002-2006.

No Software Patents