An Update on YUI 3 Charts

February 18, 2010 at 10:47 am by Tripp Bridges | In Development | 11 Comments

YUI 3 Charts in action.

Today, we checked in our work-to-date on the next generation of YUI Charts. You can find this pre-alpha code, along with some examples, in the sandbox directory of the YUI 3 head on GitHub. This initial release is a preview of where we’re going with YUI Charts; no aspect of this implementation is complete, and it’s not suitable for production use at this point, but it does give a sense of where we’re heading — and it’s a chance for us to check in with interested developers and share our progress. (If you need a production-ready charts solution today, check out YUI 2 Charts.)

For this release, we have created a solid foundation to build up the functionality of the Charts, and we’ve included one simple chart type to demonstrate the flexibility of our architecture. In particular:

YUI 3 Charts are now fully modular. Individual subcomponents of a Chart, like an Axis, or a LineGraph, are now their own classes that you can manage and update individually.
The modularity of the Charts component within the Flash Player (our current rendering engine of choice) is fully paralleled in its JavaScript wrapper. From the JS developer’s point of view, you are working with a set of JS components, with all method calls, display list changes and property assignments seamlessly transmitted to Flash and back. (This abstraction will be even more crucial when we move beyond a single rendering engine.)
The Charts now support styling every single element — from label rotation and font faces (no need for embedded fonts!), to the color and number of tick marks.
Because of the new modularity, features like multiple axes and multiple independent graphs are now included.
In addition to the very advanced Chart, we’ve drafted a sugar wrapper called SimpleChart, which allows you to quickly build Charts with two lines of code.

Now that the foundation is in place, our next step is to continue building up the Charts functionality. If you are interested in what that will be, take a look at our talk from YUIConf 2009, where we described our grand plans for the architecture and features of the Charts package.

You can start playing with Charts immediately: the component, along with a few very informative examples, is located in the YUI 3 sandbox. To get started, download the latest YUI 3 build from GitHub, drop it in your web root, and navigate to the sandbox/chart/tests directory. Keep in mind that this is not a packaged release. For that reason, the API we use is just a sketch of what the final API will be and is therefore sure to change, but we’d love to hear your thoughts and feedback on where the project is headed.

We’ve posted the current example set on YUIBlog as well (running build 1828) — feel free to click through if you’re interested in seeing the current work in action:

—Tripp Bridges and Allen Rabinovich, YUI Team engineers

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

11 Comments

As long as flash is required, I’ll be reluctant to use it. Looking forward to seeing the SVG rendering engine.

Raph

Comment by raphael — February 18, 2010 #
We’re already using the YUI2 charts, but I have to second raphael – flash-free mode (or even better, intelligent fallback to flash) would be a great incentive for upgrading.

Comment by tjp — February 18, 2010 #
We understand the need and demand for rendering engines other than flash. This is why we designed our architecture to be technology agnostic. Our first rendering engine is flash but, ultimately, we plan to have a consistent API with multiple rendering engines.

-Tripp

Comment by tripp — February 18, 2010 #
+1 for flash-free please. HTML5 canvas FTW.

Comment by Tom Green — February 19, 2010 #
Hi,

Just watched the video and had a brief browse of the code… looking good.

I’m also a canvas-not-flash fan (printing, and we have an export page to Word function that can deal with images).

What I wasn’t sure of from the video or code (because I didn’t spend long enough looking on the latter!) is where the maths happens. For example, do the min/max calculations happen in the js or actionscript? I’d have thought better in the js, in that presumably then the js axis object can point to a canvas renderer, without the canvas renderer having to also implement the same calculations. In general, can the actionscript be as light as possible and the js doing the hard work?

And as things get bedded down, it’d be helpful for people like me that might do some work on a canvas renderer to have some docs on the actionscript API as well as the js, so we know what to implement and what it’s to do.

Thanks,

Matt

Comment by Matt Parker — March 23, 2010 #
Matt,
The math occurs in the Actionscript layer. While flash is the engine, it makes sense for it to do the heavy lifting. One of the biggest performance hits is the communication between js and flash. Additionally, this architecture also allows the flash layer to be standalone for use in flash applications and environments without javascript. When we build the js rendering engine, it will be js only and will have its own parallel classes for calculations. I will be sure to get AS docs out with my next update.

Thanks,
Tripp

Comment by Tripp — March 23, 2010 #
Hi Tripp,

I take the performance and standalone points. But how about this (I might even have a go at doing it): a Stats plugin for DataSource, that would calculate various statistics on demand for different fields in the datasource. So you’d get something like:
myDs.plug( Y.Plugin.Stats );
var minimum = myDs.stats.min( “year” );
var maximum= myDs.stats.max( “price” );
var mean = myDs.stats.mean( “volume” );

(I’m making up an API as I write!)

I can see that being more generally useful (e.g. wanting to add summary rows to a datatable) but it also puts those statistics, which are properties of the data, with the data, rather than in the renderer.

Maybe both would be no bad thing…

Matt

Comment by Matt Parker — March 24, 2010 #
Matt,
You make some very good points and I agree that these properties belong in the data layer. Currently, the flash application has its own data layer which handles such tasks. When we build out the js engine, it’s data layer will be in js. This does not mean that you will not be able to use DataSource in an application with a chart, it just means that the chart will have its own copy of the data in the Actionscript layer.
Thanks,
Tripp

Comment by Tripp — March 25, 2010 #
From past couple of weeks I had been working on YUI 2 charts.
One thing that I felt missing is interactivity. Users should be able to add or remove part of the graph(for example, for a combinational chart with a line and a bar chart it would be great if the line chart could be hidden or removed when user clicks on it). Also, if large group of data is shown as one point on the graph, user should be able to see detailed chart for that point by clicking on that point and so on…
Do you have any plans to include such features in your future work.
Please direct me to related example code section if you know how to achieve those features using YUI.
Thanks

Comment by Durga — July 8, 2010 #
Interactivity is limited in the YUI 2 Chart. You can, however, hide/show a series. Here is an example in which something similar is done:
http://developer.yahoo.com/yui/examples/charts/charts-hideseries.html

The YUI3 Chart is being developed with interactivity in mind. The design is modular and all components will be exposed to the developer.

Tripp

Comment by tripp — July 8, 2010 #
Thanks Tripp,

For my current project, we want similar results but not using check boxes. Instead, using event listeners to the series(or chart) itself.

-Durga

Comment by Durga — July 9, 2010 #

Sorry, the comment form is closed at this time.

Yahoo! User Interface Blog (YUIBlog)