A YUI Charts Control can be configured at the Chart and series level. In this example, we'll use series properties to customize a combination chart.
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.
In this example, we're going to use custom series properties to format and display series information differently. We'll start with a data source representing household income and expenses. Expenses are represented negative values while income is represented with positive values. We'll use these values to calculate net income/losses, and add the calculated information as an additional property in the data source.
We will create methods to format the labels for our axis, dataTip and legend.
Some series, such as pay and rent, will always be either positive or negative. Others, such as gambling and net, can either be positive or negative. As a result, we will need to specify different dataTip functions for different series. This is best accomplished by setting one method on the chart level, and then overriding these on the series level. In the code above, we have created a default dataTipFunction for income and expense series and an additional function for series that can render a gain or a loss.
We'll set a series definition to style each series. Additionally, we will use this series definition to specify which series will use the custom label functions created above.
In the above series definition, we have styled the properties
gamblingprofits identically. We have also given them the same display name. In our chart, they will both be displayed as "gambling". We will use our custom dataTip function to differentiate between the series based on a positive or negative value. Since they both represent gambling, we only want one reference in the legend. We can use the
showInLegend property to filter out one from the legend list. We'll also put in a custom legendLabelFunction for the gambling series displayed in the legend. Finally, we will attach the custom dataTip function to our net series.
Next, we'll add our styles and axes.
Finally, we'll create a chart, setting our default dataTip and legendLabel methods.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
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.