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.