YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Chart with 2 Numeric Axes

# Charts Control: Chart with 2 Numeric Axes

A YUI Charts Control may employ two Numeric Axes of different scale to display data sets with different ranges in the same area.

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

In this example the data provider for the LineChart is a standard JavaScript Array. Each object in this Array contains multiple values, any of which can be used for the series definition in the LineChart.

YAHOO.example.monthlyExpenses = [ { month: "January", rent: 3880.00, car: 298.68, power:56.98, cable:115.50 }, { month: "February", rent: 3880.00, car: 298.68, power:68.99, cable:115.42 }, { month: "March", rent: 3880.00, car: 298.68, power:46.85, cable:123.76 }, { month: "April", rent: 3880.00, car: 315.71, power:42.52, cable:105.44 }, { month: "May", rent: 4010.00, car: 315.71, power:59.67, cable:111.42 }, { month: "June", rent: 4910.00, car: 315.71, power:68.98, cable:114.32 } ]; var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses ); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: [ "month", "rent", "car", "power", "cable" ] };

The Array is passed to a new DataSource instance, and fields are defined to specify which items will be used from the original source. In this case we'll use all of them: "month", "rent", "car", "power", and "cable".

## Define our Text formatting functions

Next we will create methods to format the labels for our axes and data tip.

YAHOO.example.formatCurrencyAxisLabel = function( value ) { return YAHOO.util.Number.format( value, { prefix: "$", thousandsSeparator: ",", decimalPlaces: 2 }); } YAHOO.example.getDataTipText = function( item, index, series ) { var toolTipText = series.displayName + " for " + item.month; toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] ); return toolTipText; }

## Create the Numeric Axes

We will use two y-axes in this chart, so we will need to create two `NumericAxis` instances. When using dual axes, you need to define a primary and a secondary axis. This is defined by the `order` property of the NumericAxis. The default value for `order` is "primary". The NumericAxis also has a `position` property that enables us to select where each axis will appear on the chart. When the NumericAxes are on the y-axis, the primary axis will default to the left side. When the NumericAxes are on the x-axis, the primary axis will default to the bottom. In our example, we will position the primary axis on the right by explicitly setting `position` on both axes.

var currencyAxis = new YAHOO.widget.NumericAxis(); currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel; currencyAxis.alwaysShowZero = false; currencyAxis.calculateByLabelSize = true; currencyAxis.position = "right"; currencyAxis.title = "Utilities"; var currencyAxis2 = new YAHOO.widget.NumericAxis(); currencyAxis2.order = "secondary"; currencyAxis2.position = "left"; currencyAxis2.title = "Rent"; currencyAxis2.labelFunction = YAHOO.example.formatCurrencyAxisLabel; currencyAxis2.alwaysShowZero = false; //place the two axis in an array to be passed to the chart as configuration attribute var axes = new Array(); axes.push(currencyAxis); axes.push(currencyAxis2);

## Define a Series Definition

When using multiple axes, we bind each series to an axis with the `axis` property.

var seriesDef = [ {displayName: "Rent", yField: "rent", axis: "secondary", style: {color:0x6238A7, size:8}}, {displayName: "Car", yField: "car", axis: "primary", style: {color:0x00E72E, size:8}}, {displayName: "Power", yField: "power", axis: "primary", style: {color:0xFFA329, size:8}}, {displayName: "Cable", yField: "cable", axis: "primary", style: {color:0xFF4AD8, size:8}} ];

In the series definition above, we bind the rent field to the secondary axis and the other fields to the primary axis.

## Create the style definition for the chart.

When using two axes, the secondary axis will inherit styles from the primary axis. You can, however, override styles for the secondary axis. In our example, we will set the `secondaryYAxis` title rotation to 90 degrees.

var styleDef = { padding:0, border:{size:3, color:0x8899dd}, background:{color:0xaeb7dc}, dataTip:{font:{color:"#000000"}, background:{color:0x00E72E, alpha:.3}}, font:{color: "#eeeeee"}, yAxis: { labelDistance:0, titleRotation:-90, titleFont:{color:0xeeeeee}, minorTicks:{display:"none"}, majorGridLines:{color:0xeeeeee}, color:0xeeeeee, majorTicks:{color:0xeeeeee} }, secondaryYAxis: { titleRotation:90 }, xAxis: { majorTicks:{display:"none"}, labelRotation:-90, size:0 } }

## Create the Chart

Because we have multiple axes, instead of using the `yAxis` attribute to set a single `NumericAxis`, we will use the `yAxes` attribute, passing our array of axes.

var mychart = new YAHOO.widget.LineChart( "chart", myDataSource, { constrainViewport:false, series: seriesDef, xField: "month", yAxes: axes, style: styleDef });

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