A YUI Charts Control allows you to dynamically change series styles. In this example, we will allow for the hiding of each series.
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.
First, we'll add two checkboxes, one for each series in the chart. These will be used to toggle the visibility of each series. Listening for the checkboxes'
onclick events, we'll use the Chart's
setSeriesStylesByIndex method to update the visibility style of each series.
For our data, let's start with a json formatted data source that contains two fields, one for revenue and one for expenses.
Next we'll create a few methods to format the labels for our axes and data tips.
Now we can set a series definition on the chart, designating two series--one for revenue and one for expenses. We'll specify a different color for each series to help differentiate them.
Now we'll create the axes, a
TimeAxis for our x-axis and a
NumericAxis for our y-axis. This will allow us to display each series on a timeline. Using the text formatting functions we previously created, we'll be able to display the revenue and expenses as dollar amounts, and the timeline in a localized date format.
To further improve the look of the chart as a whole, we'll create a style definition and modify the background color and the border. We'll also make some axis-independent style adjustments, for things like label rotation and data ticks.
Finally, we'll initialize the chart, passing it the series and style definitions. We'll also make sure to reset the checkboxes to unchecked when the
contentReady event fires and our chart displays.
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.