YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Charts Quickstart Example

# Charts Control: Charts Quickstart Example

This example is a demonstration of the YUI Chart Control's basic features.

Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

View example in new window.

Monthly Expenses
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the Adobe Flash Player Download Center.

## Create a DataSource

Like the DataTable Control, Charts use the DataSource Utility for accessing the information it displays. A DataSource instance will accept many forms of data including simple JavaScript Arrays and external data loaded through XHR in formats including XML, JSON, and delimited text.

YAHOO.example.monthlyExpenses = [ { month: "January", rent: 880.00, utilities: 894.68 }, { month: "February", rent: 880.00, utilities: 901.35 }, { month: "March", rent: 880.00, utilities: 889.32 }, { month: "April", rent: 880.00, utilities: 884.71 }, { month: "May", rent: 910.00, utilities: 879.811 }, { month: "June", rent: 910.00, utilities: 897.95 } ]; var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses ); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: [ "month", "rent", "utilities" ] };

In this example, data comes from a JavaScript Array. It is passed to the DataSource constructor. All of the fields (`"month"`, `"rent"`, and `"utilities"`) are included in the DataSource `responseSchema`.

## Define Multiple Series

An Array of definitions allows you to specify more than one series to display in the Chart control. Each definition generally includes an `xField` or `yField` value that specifies which key in the DataSource is used to access the data for a particular axis.

var seriesDef = [ { displayName: "Rent", yField: "rent" }, { displayName: "Utilities", yField: "utilities" } ];

A `displayName` is recommended to provide more information about a series to the viewer. This value is used in the mouse-over data tip and the legend, if displayed.

## Customize the Axis

The LineChart in this example uses a custom NumericAxis. This axis has a minimum bound set to the value 800. A `labelFunction` is used to format each label on the axis.

var currencyAxis = new YAHOO.widget.NumericAxis(); currencyAxis.minimum = 800; currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

The function `YAHOO.example.formatCurrencyAxisLabel()` uses the `YAHOO.util.Number` class included with DataSource to format the text as currency.

YAHOO.example.formatCurrencyAxisLabel = function( value ) { return YAHOO.util.Number.format( value, { prefix: "$", thousandsSeparator: ",", decimalPlaces: 2 }); }

Due to the nature of ActionScript-JavaScript communication, this function must be globally accessible. It may not be a method of an object instance. Pass the function reference directly or a string representation of the function name. In this case, we pass a reference to `YAHOO.example.formatCurrencyAxisLabel`, but we can also use the string value `"YAHOO.example.formatCurrencyAxisLabel"`.

## Customize the Data Tip

The chart uses a `dataTipFunction` to format the text appearing on its mouse-over data tip.

YAHOO.example.getDataTipText = function( item, index, series ) { var toolTipText = series.displayName + " for " + item.month; toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] ); return toolTipText; }

Notice that `getDataTipText()` extracts the y-axis value and formats it using `formatCurrencyAxisLabel()` to match the formatting on the axis labels.

## Creating the Chart

All of the customizations made above are passed to the Chart control as initialization attributes. The `xField` attribute is used globally by all series, and each series defines its own `yField` to display different data than the other series.

var mychart = new YAHOO.widget.LineChart( "chart", myDataSource, { xField: "month", series: seriesDef, yAxis: currencyAxis, dataTipFunction: YAHOO.example.getDataTipText });

Once again, don't forget the function reference we pass to `dataTipFunction` must be globally-accessible to allow Flash Player's ExternalInterface to call it.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Charts Control Examples:

### More Charts Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings