YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Charts in a TabView

# Charts Control: 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.

View example in new window.

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.

<style type="text/css"> .chart { width: 500px; height: 350px; margin-bottom: 10px; } .chart_title { display: block; font-size: 1.2em; font-weight: bold; margin-bottom: 0.4em; } #tabContainer { width: 520px; } </style>

## Create a DataSource

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

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" ] };

## 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 a TabView var tabView = new YAHOO.widget.TabView(); //Add a tab for the Bar Chart tabView.addTab( new YAHOO.widget.Tab({ label: 'Bar Chart', content: '<span class="chart_title">Bar Chart</span><div class="chart" id="barchart"></div>', active: true })); //Add a tab for the Line Chart tabView.addTab( new YAHOO.widget.Tab({ label: 'Line Chart', content: '<span class="chart_title">Line Chart</span><div class="chart" id="linechart"></div>' })); //Add a tab for the Column Chart tabView.addTab( new YAHOO.widget.Tab({ label: 'Column Chart', content: '<span class="chart_title">Column Chart</span><div class="chart" id="columnchart"></div>' })); //Append TabView to its container div tabView.appendTo('tabContainer');

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

//series definition for Column and Line Charts var seriesDef = [ { displayName: "Rent", yField: "rent" }, { displayName: "Utilities", yField: "utilities" } ]; //series definition for Bar Chart var barChartSeriesDef = [ { displayName: "Rent", xField: "rent" }, { displayName: "Utilities", xField: "utilities" } ];

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

//format currency YAHOO.example.formatCurrencyAxisLabel = function( value ) { return YAHOO.util.Number.format( value, { prefix: "$", thousandsSeparator: ",", decimalPlaces: 2 }); } //return the formatted text YAHOO.example.getDataTipText = function( item, index, series, axisField ) { var toolTipText = series.displayName + " for " + item.month; toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series[axisField]] ); return toolTipText; } //DataTip function for the Line Chart and Column Chart YAHOO.example.getYAxisDataTipText = function( item, index, series ) { return YAHOO.example.getDataTipText(item, index, series, "yField"); } //DataTip function for the Bar Chart YAHOO.example.getXAxisDataTipText = function( item, index, series ) { return YAHOO.example.getDataTipText(item, index, series, "xField"); } //create a Numeric Axis for displaying dollars var currencyAxis = new YAHOO.widget.NumericAxis(); currencyAxis.minimum = 800; currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

## Create Our Charts

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

//Create Line Chart var lineChart = new YAHOO.widget.LineChart( "linechart", myDataSource, { series: seriesDef, xField: "month", yAxis: currencyAxis, dataTipFunction: YAHOO.example.getYAxisDataTipText, //only needed for flash player express install expressInstall: "assets/expressinstall.swf" }); //Create Bar Chart var barChart = new YAHOO.widget.BarChart( "barchart", myDataSource, { series:barChartSeriesDef, yField: "month", xAxis: currencyAxis, dataTipFunction: YAHOO.example.getXAxisDataTipText, //only needed for flash player express install expressInstall: "assets/expressinstall.swf" }); //Create Column Chart var columnChart = new YAHOO.widget.ColumnChart( "columnchart", myDataSource, { series: seriesDef, xField: "month", yAxis: currencyAxis, dataTipFunction: YAHOO.example.getYAxisDataTipText, //only needed for flash player express install expressInstall: "assets/expressinstall.swf" });

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.

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### Charts Control Examples:

- Charts Quickstart Example
- Chart with Legend Example
- Skinning a Chart Example
- Chart and DataTable Example
- Chart with DataSource Polling
- Stacked Bar Chart
- Charts in a TabView
- Column Chart with Rotated Title and Labels
- Styling Lines, Borders and Fills
- Chart with 2 Numeric Axes
- Hide series in a chart.
- Customize series items
- Apply scope to label functions

### 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