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….