Should I bring all my shoes and glasses?

// >>

Using amCharts and Timetric to Graph Security Data
| 7. April, 2009

When looking for web graphing apps which could take multiple series of data and plot them on a graph suitable for embedding on a web page I came across a simple, and free, Flash graphing application worth mentioning. Although my journey started with AJAX, I soon found the Flash-based graphs amCharts provides were more than sufficient. You can embed these into a website, or a security metrics site, while retaining control of the data. Data is formatted in xml (giving more control over the graph) or in a csv format. The simple to use settings files are also in xml, giving you a lot of control around the graph fonts, colors, and forms.

In fact, the most difficult part of using amChart graphs is going to be pulling data in from the various data sources and updating the xml data files. While this is a work in progress, I thought it would be worth sharing this and some quick examples below. I should also mention that PHP scripts exist to pull data from a database and into the correct format. For more information see the amcharts site.

The first chart below is from the amCharts site. Click and drag on a portion of the graph you would like to highlight and try out the scroll bar at the top of the graph. This is helpful for graphs that show trends, yet have granular underlying data that may be hidden. The second pie graph is my gift to Art…and fairly accurate I might add.


Please upgrade your Flash Player to view these graphs



Please upgrade your Flash Player to view these graphs


Another mention should go out to a fairly new site called Timetric. Timetric allows you to graph data by entering fields manually, uploading a csv or xls file, or pulling data through an api. I did try this out and had some issues in formatting and uploading the data to produce graphs. It would also be obvious that these graphs are stored on a third-party server…something to keep in mind should you plan on using this for any data deemed sensitive. Here is a quick example from the site.

Using Javascript to Graph Sparklines
| 7. April, 2009

Graphing sparklines may appeal to those who have read the Edward Tufte books (I’m looking at you AJR) on the visual representation of data. On his blog he talks about sparklines here.  If you consider yourself part of this group there is a pre-written Javascript sparkline generator you may be interested in by the name of jquery sparklines.

To set this up you’ll need: 1. Some data to graph, 2. A webserver where you can host the js and html files, 3. jquery and jquery.sparklines, 4. Some basic Javascript skills…maybe PHP or Phython if you plan on generating dynamic content for the lines.

Disclaimer: I used the graphs and data directly from the sparklines site because I’m too lazy to create my own numbers.  Note that I’m limited in this post as I can’t use var or span id tag in a post, so these example all have inline static data.  For an example of one using dynamic data see this page.

Example Sparklines:

Inline Sparkline: 1,4,4,7,5,9,10
Bar charts 10,8,9,3,5,8,5 negative values: -3,1,2,0,3,-1
Composite inline 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
Dow 90,10,25,150,180
Chances that Art will think sparklines bring any value -1,-3,-5,-7,-9,-11,-25

Theme made by Igor T. | Powered by WordPress | Log in | | RSS | Back to Top