YUI Library Home

YUI Library Examples: Charts Control (experimental): Charts in a TabView

Charts Control (experimental): Charts in a TabView

This example uses the YUI Charts Control and the TabView Control to display different views of the same DataSource.

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.

Monthly Expenses

Define our styles

We can start by setting our styles for our charts and tabview container divs. This just sizes the charts and tab container, and gives us a custom style for the chart title.

Create a DataSource

We'll create a DataSource that will be used in all of our charts.

Create a TabView

We will create a TabView with the following tabs: Bar Chart, Line Chart and Column Chart. Each tab's contents will contain description text and a container div for its corresponding chart.

Create Series Definitions

Since a Bar Chart displays its data on the x axis, it will need a different series definition than the Line Chart and Column Chart.

Create Our Currency Axis

We will create a Numeric Axis and its formatting functions. Again, we will need to accomodate the fact that Bar Chart displays its currency on a different axis.

Create Our Charts

Finally, we'll create our three charts and assign each to its corresponding container div.

The Bar Chart has currencyAxis assigned to the xAxis and YAHOO.example.getXAxisDataTipText assigned as its dataTipFunction while the Line and Column Charts have the currencyAxis assigned to the yAxis and getYAxisDataTipText assigned as the dataTipFunction.

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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