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.

View example in new window.

Monthly Expenses
Bar Chart
Line Chart
Column Chart

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.

1<style type="text/css"> 
2    .chart 
3    { 
4        width: 500px; 
5        height: 350px; 
6        margin-bottom: 10px; 
7    } 
8 
9    .chart_title 
10    { 
11        display: block; 
12        font-size: 1.2em; 
13        font-weight: bold; 
14        margin-bottom: 0.4em; 
15    } 
16
17    #tabContainer 
18    { 
19        width: 520px; 
20    } 
21</style> 
view plain | print | ?

Create a DataSource

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

1YAHOO.example.monthlyExpenses = 
2[ 
3    { month: "January", rent: 880.00, utilities: 894.68 }, 
4    { month: "February", rent: 880.00, utilities: 901.35 }, 
5    { month: "March", rent: 880.00, utilities: 889.32 }, 
6    { month: "April", rent: 880.00, utilities: 884.71 }, 
7    { month: "May", rent: 910.00, utilities: 879.811 }, 
8    { month: "June", rent: 910.00, utilities: 897.95 } 
9]; 
10 
11var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses ); 
12myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
13myDataSource.responseSchema = 
14{ 
15    fields: [ "month", "rent", "utilities" ] 
16}; 
view plain | print | ?

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.

1//Create a TabView 
2var tabView = new YAHOO.widget.TabView(); 
3 
4//Add a tab for the Bar Chart 
5tabView.addTab( new YAHOO.widget.Tab({ 
6        label: 'Bar Chart', 
7        content: '<span class="chart_title">Bar Chart</span><div class="chart" id="barchart"></div>', 
8        active: true 
9})); 
10 
11//Add a tab for the Line Chart 
12tabView.addTab( new YAHOO.widget.Tab({ 
13        label: 'Line Chart', 
14        content: '<span class="chart_title">Line Chart</span><div class="chart" id="linechart"></div>' 
15})); 
16 
17//Add a tab for the Column Chart 
18tabView.addTab( new YAHOO.widget.Tab({ 
19        label: 'Column Chart', 
20        content: '<span class="chart_title">Column Chart</span><div class="chart" id="columnchart"></div>' 
21})); 
22 
23//Append TabView to its container div 
24tabView.appendTo('tabContainer'); 
view plain | print | ?

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.

1//series definition for Column and Line Charts 
2var seriesDef = 
3[ 
4    { displayName: "Rent", yField: "rent" }, 
5    { displayName: "Utilities", yField: "utilities" } 
6]; 
7 
8//series definition for Bar Chart 
9var barChartSeriesDef = 
10[ 
11    { displayName: "Rent", xField: "rent" }, 
12    { displayName: "Utilities", xField: "utilities" } 
13]; 
view plain | print | ?

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.

1//format currency 
2YAHOO.example.formatCurrencyAxisLabel = function( value ) 
3{ 
4    return YAHOO.util.Number.format( value, 
5    { 
6        prefix: "$", 
7        thousandsSeparator: ",", 
8        decimalPlaces: 2 
9    }); 
10} 
11 
12//return the formatted text 
13YAHOO.example.getDataTipText = function( item, index, series, axisField ) 
14{ 
15    var toolTipText = series.displayName + " for " + item.month; 
16    toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series[axisField]] ); 
17    return toolTipText; 
18} 
19 
20//DataTip function for the Line Chart and Column Chart 
21YAHOO.example.getYAxisDataTipText = function( item, index, series ) 
22{ 
23    return YAHOO.example.getDataTipText(item, index, series, "yField"); 
24} 
25 
26//DataTip function for the Bar Chart 
27YAHOO.example.getXAxisDataTipText = function( item, index, series ) 
28{ 
29    return YAHOO.example.getDataTipText(item, index, series, "xField"); 
30} 
31 
32//create a Numeric Axis for displaying dollars 
33var currencyAxis = new YAHOO.widget.NumericAxis(); 
34currencyAxis.minimum = 800; 
35currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel; 
view plain | print | ?

Create Our Charts

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

1//Create Line Chart 
2var lineChart = new YAHOO.widget.LineChart( "linechart", myDataSource, 
3{ 
4    series: seriesDef, 
5    xField: "month", 
6    yAxis: currencyAxis, 
7    dataTipFunction: YAHOO.example.getYAxisDataTipText, 
8    //only needed for flash player express install 
9    expressInstall: "assets/expressinstall.swf" 
10}); 
11 
12//Create Bar Chart 
13var barChart = new YAHOO.widget.BarChart( "barchart", myDataSource, 
14{ 
15    series:barChartSeriesDef, 
16    yField: "month", 
17    xAxis: currencyAxis, 
18    dataTipFunction: YAHOO.example.getXAxisDataTipText, 
19    //only needed for flash player express install 
20    expressInstall: "assets/expressinstall.swf" 
21}); 
22 
23//Create Column Chart 
24var columnChart = new YAHOO.widget.ColumnChart( "columnchart", myDataSource, 
25{ 
26    series: seriesDef, 
27    xField: "month", 
28    yAxis: currencyAxis, 
29    dataTipFunction: YAHOO.example.getYAxisDataTipText, 
30    //only needed for flash player express install 
31    expressInstall: "assets/expressinstall.swf" 
32}); 
view plain | print | ?

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:

Logger Console

INFO 71ms (+0) 11:41:21 AM:
global
Unable to load SWF ../../build/charts/assets/charts.swf
INFO 71ms (+0) 11:41:21 AM:
global
Unable to load SWF ../../build/charts/assets/charts.swf
INFO 71ms (+71) 11:41:21 AM:
global
Unable to load SWF ../../build/charts/assets/charts.swf
INFO 0ms (+0) 11:41:21 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Charts Control (experimental) Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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