YUI Got a Little More Flashy Today!

Posted in "Flash, YUI" at 7:26 pm on December 4, 2007 by Josh Tynjala |

Today, Yahoo! releases version 2.4.0 of the YUI Library. Why are we telling you about the release of a library primarily aimed at JavaScript developers on a Flash blog? Well, I (Josh) have been working with the YUI team for the past few months to help them introduce a new component that leverages the power of Flash Player. The experimental YUI Charts widget brings the Yahoo! Astra Flash Charts to a whole new audience.

One of the big goals for the project was to retain all the features of the Flash charts, but to present them in an API more familiar to JavaScript developers. For instance, YUI Charts use the DataSource utility to load data from JavaScript or through XMLHTTPRequest. Developers experienced with the DataTable widget already understand how to use DataSource, so can they easily translate their existing knowledge. The process of embedding the charts SWF in a webpage is fully encapsulated. To create a new LineChart, a developer only needs to create a new instance of the class. The constructor receives the ID of the HTML container in which to place the charts, a DataSource instance, and a set of initializing values for properties and styles.

var lineChart = new YAHOO.widget.LineChart( containerID, dataSource, initializer );

One challenge along the way was determining the best way to set styles on a chart. Ideally, I would have liked to use the browser CSS engines, but custom style names and potentially complex values that weren’t always supported forced me to find a different approach. In the end, I determined that the best method is to use the initializer value in the constructor to pass in an Object hash of style values.

style:
{
    padding: 20,
    border:
    {
        color: 0x995566,
        size: 2
    },
    font:
    {
        name: "Verdana",
        color: 0x995566,
        size: 12
    }
}

As you can see, it looks similar enough to CSS that anyone should be able to figure it out quickly, but it’s really just a standard JavaScript Object. Everything from axes, to grid lines, to the mouse over data tip can be styled with colors, fonts, and images. If you asked me about my favorite feature, I’d have to say that it’s the support for background images. The chart itself, the data tip, and item markers can all use custom images, loaded at runtime. Additionally, I’ve exposed tiling options that are similar to CSS, including the familiar repeat, repeat-x, repeat-y, no-repeat, and a new special option called stretch which will cause the background image size to scale to the full dimensions of the object in which it appears.

That’s just a quick taste of the new YUI Charts widget. Of course, head on over to the YUI page on the Yahoo! Developer Center and read the official announcement on the YUI Blog to get more information. Now, if you’ll excuse me, I’ve got to get back to my next project. Oh Flex, how I’ve missed you….

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

11 Comments »

RSS feed for comments on this post. TrackBack URI

  1. […] YUI Got a Little More Flashy! - Yahoo! Flash Blog talks about the YUI 2.4.0 release that has the experimental YUI Charts widget that makes Yahoo! Astra Flash Charts accesable to YUI folks […]

    Pingback by A whole lotta awesome stuff « FLEXing My Muscle — December 4, 2007 #

  2. […] Update: Apparently, this is a joint project between the Flash and JavaScript teams at Yahoo, so the Flashy people have more info on the YUI utility.   […]

    Pingback by Refresh » Blog Archive » Charting with YUI — December 5, 2007 #

  3. That’s good stuff. I wonder why it needs FP 9.0.45 though. Is it built on AS3?

    Comment by Julian — December 5, 2007 #

  4. I see you use SWFObject 1.5 to embed the charts SWF.

    Are there plans to integrate SWFObject more tightly into YUI namespace?

    Comment by Erki Esken — December 5, 2007 #

  5. Julian, the charts are built with AS3 using the component framework included with Flash CS3 as a base. The Flash CS3 components have a minimum version requirement of 9.0.45. I would have liked to support any version of Flash Player 9, but the components made my development much easier, so I made that tradeoff.

    Erki, you’re right, we’re using SWFObject 1.5. There are no current plans to integrate SWFObject into the YAHOO.* namespace.

    Josh Tynjala
    Yahoo! Flash Platform

    Comment by Josh Tynjala — December 5, 2007 #

  6. OK, but can you expand on how you’ve been using SWFobject at Yahoo? Do you embed it inside every JS library that needs it, or include it once from separate file?

    Comment by Erki Esken — December 5, 2007 #

  7. As far as I know, this is the first time a JS library has needed to use SWFObject at Yahoo!.

    If, in the future, we include more Flash controls in YUI, it is likely that the YAHOO.widget.FlashAdapter class will be moved into its own JS file so that multiple controls can use it without duplicating code. In that case, SWFObject will also be moved into the same file as FlashAdapter.

    Though the Flash Platform team currently recommends SWFObject for most Flash embedding needs, we may eventually decide that another library is a better choice.

    Josh Tynjala
    Yahoo! Flash Platform

    Comment by Josh Tynjala — December 5, 2007 #

  8. I’m really looking forward to having a play with this new YUI Charting Widget. Seems a great way to generate Flash graphs for non-flashers.

    Comment by Mike — December 9, 2007 #

  9. Thanks for the interest, Mike. Be sure to file bug reports and feature requests so that we can make this control better!

    Josh Tynjala
    Yahoo! Flash Platform

    Comment by Josh Tynjala — December 10, 2007 #

  10. […] Yahoo! Flash(R) Blog » Blog Archive » YUI Got a Little More Flashy Today! - Yahoo! releases version 2.4.0 of the YUI Library and they have been working with the Flash team to help them introduce a new component that leverages the power of Flash Player. The experimental YUI Charts widget brings the Yahoo! Astra Flash Charts […]

    Pingback by Vinny Carpenter’s blog » Daily del.icio.us for Dec 04, 2007 through Dec 06, 2007 — December 11, 2007 #

  11. For those interested in an alternative to SWFObject:

    JavaScript Flash Detection Library

    JavaScript Flash HTML Generator Library

    Both libraries have JSMin version and are JSLint compliant.

    Comment by Carl S. Yestrau — January 26, 2008 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Hosted by Yahoo!

Copyright © 2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.