LightCharts

A lightweight line-chart library for Flex.

Background

I created LightCharts for a project of mine that involves tracking many stock market symbols. Originally I was using the Adobe Flex Charting library, but found that performance suffered greatly given the number of charts I was using (around 60+), the amount of data displayed, and the constant real-time updates. Of course this isn’t necessarily due to poor coding on Adobe’s part, it’s just that their library contains an amazing amount of features to handle a variety of needs, consequently it’s very heavy. I didn’t need a lot of features, just a nimble way to display data.

I searched the Internet for other charting libraries which I could use and stumbled across a fantastic set of components created by Keith Peters called Minimal Comps. Keith’s library is extremely lightweight and it would have been a good fit, but MinimalComps is geared towards the pure Flash environment and not Flex – a major issue being the disparity in the component lifecycle.

Nonetheless, I was inspired by his code so I decided to use it as a starting point, adding and changing what I needed along the way.

Features

The result is a charting library that has many new features and several new object classes, some for visual enhancements and others for displaying and interacting with data. For instance, the data series class gives the ability to display multiple lines on a graph. The Toolset architecture is useful for creating mini plug-ins which can annotate or interact with data, all without needing to change any of the charting base classes.

Also, the line-chart class can be subclassed to create new line-chart types which have different visual characteristics or behavior. Included are a couple of examples for charts which I used in my project – these include the MACD and Stochastic. Note: These examples show how to make visual and behavioral changes to the base class, not how to calculate the values for the MACD or Stochastic charts. Those formulas can be easily found online.

Screenshot

In the screenshot above you can see many of the features:

• Three different charts (standard, MACD, and Stochastic), displaying different backgrounds including gradients and alphas, line colors, value ranges, etc.
• On the first chart, the display of crosshairs and coordinate value on mouseover; all charts have this functionality.
• On the first and second charts, a custom plug-in called DotDisplayTool which displays a dot over the last data point in the series. DotDisplayTool is an example of a non-interactive plug-in.
• On the second and third charts, a custom plug-in called LinearDrawTool which allows you to draw on top of the data; it displays a line and the chart values which correspond to the beginning and ending points. LinearDrawTool is an example of an interactive plug-in.

Live Demo & Source

If you want to see the library in action, click on the following link: LightCharts live demo.

The source is covered under the MIT license and it’s currently available from the live demo “View Source…”.

There is a problem with these keys, however, if they are not truly random. This is detailed in a paper I stumbled upon entitled “Brute-Force Exploitation of Web Application Session IDs” by David Endler. It covers ways in which these keys can be “hacked” because they are not unique, but rather follow some sequence which can be guessed. He lists some major websites which he was able to get access to information that should have been private.

The paper got me thinking about how to generate random session keys, so I created some quick Python scripts using Twisted which demonstrates my solution. (This was my first time using Twisted, so it’s very possible that there is a better way to structure the code).

Solution

The character buffer in the server is used to generate new keys.

To fill the buffer:

0. Create a list of websites which themselves deliver random web pages (eg, wikipedia)
1. Select a website from random and ask for a random page
2. Grab the data within the HTML body tags and put that string in the character buffer
3. When the buffer needs more data, go back to 1.

To generate X number of keys:

0. Grab two random lengths of the character buffer. Use one to re-seed the random generator and the other as the basis for the new session key. Create the session key using MD5 and the key seed
1. Update() the current MD5 session key using a generated random character / string
2. Add that key to the buffer.
3. When the key buffer needs more keys, go back to Step 1. For every Y number of keys generated, go back to Step 0.

Notes

We don’t use a a new seed for each MD5 session key because the buffer will be emptied too quickly. Of course, the settings for the buffer size, etc could be tweaked.

Performance

Running the server code on my Mac Mini (2.16GHz Dual Core) and 5 clients on another machine, I was able to service ~8000 keys/sec (~750 million keys/day).

Conclusion

My experiment satisfied my curiosity and answered the questions from my own project.

There are, of course, many tweaks that can be made. Send me the code changes to your favorites and I’ll include them.

Click to download the client server files.

Resources

• Brute-Force Exploitation fo Web Application Session IDs (PDF)

I built it using the Adobe Flex framework. You can get more information about KryptoPhoto at MentalHijack.com.

One example app which helped me greatly was from a blog posting by Ely Greenfield. If you’re interested, you can view it on his website: chart annotation demo.

Unfortunately, the code you can download from his site is a little old so it has problems compiling in Flex Builder 2+. I have updated the code, fixed some bugs in it and have it available here: download OverlayDemo-fixed.zip.

Ely has other interesting demos on his site which are worth checking out. Some of my favorites are: the variable radius pie chart demo, the interactive bubble chart demo, and the dashed lines demo.

Resources

annotation example by Ely Greenfield

• http://www.quietlyscheming.com/blog/2006/04/03/custom-chart-annotations/
• demo: http://demo.quietlyscheming.com/overlayDemo/index.html

annotation example by Brendan Meutzner

• http://www.stretchmedia.ca/blog/index.cfm/2007/3/28/Chart-Milestones-using-annotationElements
• demo: http://www.stretchmedia.ca/code_examples/chart_milestone/main.html

I found what I was looking for in the article “An architectural blueprint for Flex applications” written by Joe Berkovitz. In it he talks about a way in which he architects Flex applications using pure Flex/Actionscript constructs.

Being a Flex newbie, I learned a lot from his article like how to pass variables to your own MXML tags and even customize them using Actionscript. His architecture also solves an issue I was having with Event messaging/bubbling due to the fact that it only works automatically on DisplayObject components. His design also has an interesting way of handling multiple data-services as well as the operations required for handling service communication.

Source code for the project is available in the article. I would recommended downloading it and browsing through the files.

Resources:

• “An architectural blueprint for Flex applications” written by Joe Berkovitz, http://www.adobe.com/devnet/flex/articles/blueprint.html

It requires the Python module csv (included with Python 2.3 or later)

Run the script like so:

./outlook2macjournal.py [input_file] [output_file]

If no input or output files are listed, it will use the following defaults:

Outlook (input): exchange_export.csv
MacJournal (output): macjournal_import.txt

You can click here to download the Outlook to MacJournal Python script.

The layout and typography are roughly based on the format of the book as well.

You can click here to download the Template Method handout.

Though, one such example I found was a simple function that I found at Simon Wilson’s web site. It solves the problem of having several Javascript modules fighting for the coveted onload event in the <body> tag. I say coveted because there is only one of these events on an HTML page, and it is very important because this event is called only after the entire page is loaded. For a Javascript module, this is a good time to do an action like initialization because it guarantees that any called functions will be able to work on on a complete set of HTML tags, Javascript modules, images, etc.

The Past

Before the widespread use of Javascript, the onload function would simply be set in the HTML @@ tag on a page.:

   .
   .

And if there were several methods to be called, you could make the onload function more generic by using it to call other methods:

   .
   .

But this only works well if you are the creator of all of the code which goes into a site.

The Present

Now that we’re seeing a ton of development happening on the HTML-side of things, especially from the AJAX-world, it’s certain that folks will start using multiple Javascript modules on their sites and that some of these modules will want to get their piece of the onload event.

However, a problem arises if a module isn’t careful about how it sets the onload event. If it uses basic Javascript syntax it would effectively wipeout any previously defined onload functions:

Enter in Simon’s addLoadEvent function which uses Javascript closures wrapped in a decorator-like fashion to allow more than one function to be assigned to the ‘onload’ event at runtime.

This is the code listing pasted from Simon’s site:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */
});

However, I will note that this solution is not a pure example of the decorator pattern because:

1. The definition from my Head Start book states “The Decoration Pattern involves a set of decorator classes that are used to wrap concrete components.” In this example the concrete component, the very innermost function, is of the same class as the closure decorators – a function – and not of a separate object type.

2. Also the function objects get called themselves rather then a separate method on a class object. However, I think this would be ok if you consider each function having an equivalent to Python’s __call__ method. This method would then be the common interface between the objects.

In any event, pure Decorator or not, this is a clever way to use Javascript to solve this web problem and at least deserves a Decorator Honorable Mention.

The other day, I came across a case statement while glancing through some Javascript code from another company. This time I made a mental note to use it the next time that I could.

this.corner_suffix = ['tl','tr','br','bl'];

for( i = 0; i < this.corner_suffix.length; i++ ) {

  // the first character takes care of top/bottom borders
  switch ( this.corner_suffix[i].charAt(0) ) {
    case 't':
      // set top location, turn off bottom border
      break;

    case 'b':
      // set bottom location, turn off top border
      break;
  }
  // the second character takes care of left/right borders
  switch ( this.corner_suffix[i].charAt(1) ) {
    case 'r':
      // set right location, turn off left border
      break;

    case 'l':
      // set left location, turn off right border
      break;
    }
}

from glorp import blah
import foo

I was happy to have found an open-source project which emulates that functionality in JavaScript! I haven’t been able to do more than skim the web site, but it looks promising.

Resources

• http://ajile.sourceforge.net/