Axes Title and Label fields can be rotated on the YUI Charts Control by setting the titleRotation and labelRotation axis styles. This example shows you how.
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.
We will start by adding our data for the charts.
1 | YAHOO.example.monthlyExpenses = |
2 | [ |
3 | { month: "January", rent: 1350.00, utilities: 941.68 }, |
4 | { month: "February", rent: 1350.00, utilities: 901.35 }, |
5 | { month: "March", rent: 1350.00, utilities: 789.32 }, |
6 | { month: "April", rent: 1350.00, utilities: 684.71 }, |
7 | { month: "May", rent: 1500.00, utilities: 779.811 }, |
8 | { month: "June", rent: 1500.00, utilities: 897.95 }, |
9 | { month: "July", rent: 1500.00, utilities: 919.811 }, |
10 | { month: "August", rent: 1500.00, utilities: 937.95 }, |
11 | { month: "September", rent: 1500.00, utilities: 779.811 }, |
12 | { month: "October", rent: 1500.00, utilities: 697.95 }, |
13 | { month: "November", rent: 1500.00, utilities: 679.811 }, |
14 | { month: "December", rent: 1500.00, utilities: 897.95 } |
15 | ]; |
16 | |
17 | var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses ); |
18 | myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
19 | myDataSource.responseSchema = |
20 | { |
21 | fields: [ "month", "rent", "utilities" ] |
22 | }; |
view plain | print | ? |
Next we'll add a series to our chart, and give it a style.
1 | //series definition for chart |
2 | var seriesDef = |
3 | [ |
4 | { |
5 | displayName: "Rent", |
6 | yField: "rent", |
7 | style:{size:10} |
8 | }, |
9 | { |
10 | displayName: "Utilities", |
11 | yField: "utilities", |
12 | style:{size:10} |
13 | } |
14 | ]; |
view plain | print | ? |
In the styles for our x-axis and y-axis, we'll set the corresponding labelRotation
and titleRotation
to -90. This will make the title on the y-axis and the labels on the x-axis to be rotated -90 degrees (counterclockwise). While both styles accept values between -90 and 90, it is generally recomended to only use the values -90, 90 or 0 (default), as text fields will display more clearly at these settings.
1 | //Style object for chart |
2 | var styleDef = |
3 | { |
4 | xAxis: |
5 | { |
6 | labelRotation:-90 |
7 | }, |
8 | yAxis: |
9 | { |
10 | titleRotation:-90 |
11 | } |
12 | } |
view plain | print | ? |
Add our axes and label formatting methods.
1 | //format currency |
2 | YAHOO.example.formatCurrencyAxisLabel = function( value ) |
3 | { |
4 | return YAHOO.util.Number.format( value, |
5 | { |
6 | prefix: "$", |
7 | thousandsSeparator: ",", |
8 | decimalPlaces: 2 |
9 | }); |
10 | } |
11 | |
12 | //DataTip function for the chart |
13 | YAHOO.example.getDataTipText = function( item, index, series ) |
14 | { |
15 | var toolTipText = series.displayName + " for " + item.month; |
16 | toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] ); |
17 | return toolTipText; |
18 | } |
19 | |
20 | //create a Numeric Axis for displaying dollars |
21 | var currencyAxis = new YAHOO.widget.NumericAxis(); |
22 | currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel; |
23 | currencyAxis.title = "Money Spent"; |
24 | |
25 | //create Category Axis to specify a title for the months |
26 | var categoryAxis = new YAHOO.widget.CategoryAxis(); |
27 | categoryAxis.title = "Month"; |
view plain | print | ? |
Finally, we'll add the chart and call it good.
1 | //create a Chart |
2 | var mychart = new YAHOO.widget.ColumnChart( "chart", myDataSource, |
3 | { |
4 | series: seriesDef, |
5 | xField: "month", |
6 | yAxis: currencyAxis, |
7 | xAxis: categoryAxis, |
8 | style: styleDef, |
9 | dataTipFunction: YAHOO.example.getDataTipText, |
10 | //only needed for flash player express install |
11 | expressInstall: "assets/expressinstall.swf" |
12 | }); |
view plain | print | ? |
There are even more styles available for the axes than we've covered in this tutorial. For full details about the axes styles, read the Charts Control User's Guide.
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.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings