Column-Chart-with-Rotated-Title-and-Labels

YUI Library JavaScript DHTML


            

    
Column Chart with Rotated Title and Labels

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}









  #chart
  {
    width: 500px;
    height: 350px;
  }
  .chart_title
  {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.4em;
  }




Column Chart with Rotated Title and Labels


  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.



Monthly Expenses
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the Adobe Flash Player Download Center.

  YAHOO.widget.Chart.SWFURL = "yui_2.7.0b-lib/charts/assets/charts.swf";
//--- data
  YAHOO.example.monthlyExpenses =
  [
    { month: "January", rent: 1350.00, utilities: 941.68 },
    { month: "February", rent: 1350.00, utilities: 901.35 },
    { month: "March", rent: 1350.00, utilities: 789.32 },
    { month: "April", rent: 1350.00, utilities: 684.71 },
    { month: "May", rent: 1500.00, utilities: 779.811 },
    { month: "June", rent: 1500.00, utilities: 897.95 },
    { month: "July", rent: 1500.00, utilities: 919.811 },
    { month: "August", rent: 1500.00, utilities: 937.95 },
    { month: "September", rent: 1500.00, utilities: 779.811 },
    { month: "October", rent: 1500.00, utilities: 697.95 },
    { month: "November", rent: 1500.00, utilities: 679.811 },
    { month: "December", rent: 1500.00, utilities: 897.95 }
  ];
  var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );
  myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  myDataSource.responseSchema =
  {
    fields: [ "month", "rent", "utilities" ]
  };
//--- chart
  //series definition for chart
  var seriesDef =
  [
    {
      displayName: "Rent",
      yField: "rent",
      style:{size:10}
    },
    {
      displayName: "Utilities",
      yField: "utilities",
      style:{size:10}
    }
  ];
  //Style object for chart
  var styleDef =
  {
    xAxis:
    {
      labelRotation:-90
    },
    yAxis:
    {
      titleRotation:-90
    }
  }
  //format currency
  YAHOO.example.formatCurrencyAxisLabel = function( value )
  {
    return YAHOO.util.Number.format( value,
    {
      prefix: "$",
      thousandsSeparator: ",",
      decimalPlaces: 2
    });
  }
  //DataTip function for the chart
  YAHOO.example.getDataTipText = function( item, index, series )
  {
    var toolTipText = series.displayName + " for " + item.month;
    toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] );
    return toolTipText;
  }
  //create a Numeric Axis for displaying dollars
  var currencyAxis = new YAHOO.widget.NumericAxis();
  currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
  currencyAxis.title = "Money Spent";
  //create Category Axis to specify a title for the months
  var categoryAxis = new YAHOO.widget.CategoryAxis();
  categoryAxis.title = "Month";
  //create a Chart
  var mychart = new YAHOO.widget.ColumnChart( "chart", myDataSource,
  {
    series: seriesDef,
    xField: "month",
    yAxis: currencyAxis,
    xAxis: categoryAxis,
    style: styleDef,
    dataTipFunction: YAHOO.example.getDataTipText,
    //only needed for flash player express install
    expressInstall: "yui_2.7.0b-assets/charts-assets/expressinstall.swf"
  });



yui_2.7.0b.zip( 4,431 k)