YUI Charts Enhancements

YUI chart controls are probably one of the easiest and widely adopted chart controls for small and, perhaps larger, developers/companies. To top it all its license is highly permissive, and that's why I decided to cook up some small enhancement ideas I wished YUI had already implemented.

  • Smooth Lines
    This idea is based on the pretty neat Facebook Ads charts. Unfortunately I must admit that I'm no designer or a great "art" programmer, so my bezier curves patch doesn't really seem to improve the charts in all situations, maybe with some time and help I can make it smoother and prettier all the time.
  • Annotations
    Google Finances and Google Trends have it, Google Visualization provides an easy way of doing it, but overall I don't like Google Charts/Visualization libraries. So, I went on a search spree to find chart controls supporting it, nothing... I mean, not even commercial chart libraries! So, I started this little YUI fork to implement that.

Smooth Lines

Git branch: | Notes!

The usage of this patch is pretty easy, just add a "lineSmooth: true" to the style of the series and there you go. At the moment the "roundness" is hard coded in to the code, in the future it should have another property to allow the user to set it up. The reason I didn't include this property yet is that I've been noticing that the value depends from chart to chart, it varies with the number of plotted points as well as with the point values, so I'm trying to figure out if I should instead implement an algorithm to find the best roundness for each point automatically.


Git branch: | Notes!

If you don't know what annotations are, you should check them out in action over here or here. See those little flags "A", "B", etc...? And if you click on them you'll see one or more news highlighted in the right of the chart. Those are annotations and they can server several purposes, for example, imagine you're seeing a chart about your site earnings, with annotations you could easily spot key events like "new blog post" or "begin of ad campaign" on the correct dates.

As you can see in the screenshot I've already managed to do very much. Those notes in the chart are simply a new series type I created based on the line series. UI-wise it already support changing the color and border (including alphas) and they are smart enough to place them selves on top of the highest series plotted. I've also managed to make the events work (though it maybe considered a bit of an ugly hack for now).

The work left is to make the placement of the notes even smarter, by avoiding the chart edges and also avoiding to hit the lines as you can see on the screenshots left-most note. Stacking of several notes should also be possible (i.e. if you have 2 notes for the same date. Finally it needs to get the text from somewhere and that's something I still have no clue on why it doesn't work if I simply put the text on the series definition.

If you're trying to build/test this code all you need is to add a new series to a chart of the type notes:

	type: "notes",
	displayName: 'Notes Series',
	yField: 'note',
	style: {
		fillColor: 0xff00ff,
		fillAlpha: 0.4,
		borderColor: 0xff0000

You should also know that for the moment you've to define all values, with a null or a numeric value. For example, in that screenshot, this is the data I used:

var store = new{
	fields: ['name', 'visits', 'views', 'note'],
	data: [
		{ name: 'Jul 07', visits: 245000, views: 3000000, note: 1 },
		{ name: 'Aug 07', visits: 240000, views: 7500000, note: null },
		{ name: 'Sep 07', visits: null, views: 4500000, note: null },
		{ name: 'Oct 07', visits: 375000, views: 4200000, note: 2 },
		{ name: 'Nov 07', visits: 490000, views: 4500000, note: null },
		{ name: 'Dec 07', visits: 495000, views: 5800000, note: null },
		{ name: 'Jan 08', visits: 520000, views: 6000000, note: 3 },
		{ name: 'Feb 08', visits: 620000, views: 7500000, note: null }

Note: All my forks and patches are based on YUI 2.7.0, not because of being a stable version but because I couldn't build and run the HEAD revisions from their Git. Build needed 1-2 fixes but then I wouldn't see anything in the browser (even with the default samples they provide). Because I'm new to hacking YUI & coding with Action Script perhaps in the future I can port the patches to the HEAD revisions.