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.
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".
Next we will create methods to format the labels for our axes and data tip.
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.
When using multiple axes, we bind each series to an axis with the
In the series definition above, we bind the rent field to the secondary axis and the other fields to the primary axis.
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.
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.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.