Archive for the ‘Charting’ Category

AnyChart – Flex, Flash and HTML5 Charting Component

Tuesday, January 31st, 2012

Doing an feasibility study of AnyChart API for Flex at the moment. Its looking very promising….

AnyChart for Flex and Html5:

AnyChart - Flex and HTML5

AnyChart Financial for Flex

AnyChart Stock Components

Data visualization in Flex 4.5 with Kolbert – Radar to Petal Chart

Wednesday, December 14th, 2011

Sometimes the data displayed in a Radar Chart can be difficult to intuitively analyse. I read a good article on alternatives to radar charts and wanted to apply the “Petal Chart” in Flex. When you look at the result, you would’nt think that both charts visualize the same data!

I used Kap Labs’ Kolbert API to generate a regular Radar Chart, and edited the data source and axis items to create a Flex Petal Chart. The two different data source CSV files can be seen if you right-click, View Source, and go to assets folder.

Radar and Petal Chart - Flex 4.5 using Kolbert

Flex Stacked Chart: Display custom dataTip total value

Thursday, March 4th, 2010

Once you use a custom dataTip (dataTipFunction = “myDataTipFunction”) in a stacked chart, its not possible to directly access the total value of items in a column/bar.

This means that your custom dataTips will be without the % and total values that appear (as a default) on Flex stacked charts. This problem is now solved in a simple manner!

Custom DataTip - with % and Total

The function below gets around this problem, and gives one access to a custom dataTip’s ‘total’ value for stacked columns/bars. Complete mxml code is in the full article.

private function myDataTipFunction(hitData:HitData):String
	var itemsDictionary:Dictionary = new Dictionary();
	var total:Number = 0;

	//hitData.item holds name value pairs for each of the
	//dataProvider's rows(sales array in this case)
	for(var property:Object in hitData.item){
		itemsDictionary[property] = hitData.item[property];

	// Have to get instance of hitData.element (a ColumnSeries) to
	// access element.series.stacker.series which holds the yField
	// values e.g. toys. Note: needed as hitData.element.
	// series.stacker is not accessible directly.
	var series:ColumnSeries = ColumnSeries(hitData.element);
	for( var key:Object in itemsDictionary)
		for( var i:int = 0; i < series.stacker.series.length; i++){
			// Need to check that we only add yField values, as "period-Q1"
			// is also in hitData.item along with "toys-900" etc
			if(series.stacker.series[i].yField == key.toString()){
				total += itemsDictionary[key];

    var item:ColumnSeriesItem = ColumnSeriesItem(hitData.chartItem);
    var quarter:Object = xAxis.formatForScreen(item.xValue);
    var value:Number = Number(item.yValue) - Number(item.minValue);
    // want 2 decimal place precision
    var percent:Number = Math.round(value / total * 1000) / 10;

    return  "<b>" + series.displayName + "\n" +
			"<b>------------------</b>\n" +
			"" + quarter + "\n" +
			"<b>------------------</b>\n" +
			"<b>Value:\t\t</b>" + value + " \n" +
			"<b>Percent:\t</b>" + percent + "% \n" +
			"<b>Total:\t\t</b>" + total;

For the full .mxml example class code….. (more…)

Wow! Directed Network Graphs available in VS 2010 – but no standalone viewer:(

Tuesday, February 2nd, 2010

VSTS 2010 includes an amazing tool to visualize network graphs based on the DGML (directed graph) xml format. From what i’ve seen, this xml format is almost identical to the commonly used GraphML format (as used by the java and flash based prefuse and flare), at least for the basic attributes (nodes, links, source, target etc.). The tool is part of the VS2010 Architecture Explorer, and allows developers to visualize relationships between code segements/classes.

Unfortunately, it appears that there is no standalone ‘graph viewer’ available outside of VS (microsoft missed out on a trick here, that would have been a brilliant app ability!). The best DGML tutorials and vids are available on the Skinner and Chris Lovett blogs, at least until VS comes out of beta.

On the bright side, iv’e read that DGML is powered by MSAGL – a Microsoft product for automatic graph layout ($99 for a limited time, otherwise $280).

Microsoft Charts (.Net) – Based on Dundas Charts

Tuesday, February 2nd, 2010

Microsoft Charting Component was released just over a year ago for .Net (ASP and WinForms), and is based on a cut down version of Dundas Charts API, from whom Microsoft have purchased the IP. The download, with a very good sample gallery, is avialable here. Having looked at all the examples, theyre not as smooth or interactive as the native Flex charts, but good enough all the same.

ASP.Net dashboard example and tutorial is available on Michael Ceranskis site.

According to Alex Gorevs blog, the charting components will be integrated into .Net 4 (he also has some good tutorials).