Archive for the ‘Charting’ Category

Flex Stacked Chart: Display custom dataTip total value

March 4, 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 + "</b>\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:(

February 2, 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

February 2, 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).