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.

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.

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.

Define a Series Definition

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

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.

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.

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.