YUI Library JavaScript DHTML


            


    
Chart and DataTable Example

/*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;
    margin-bottom: 10px;
  }
  .yui-dt-table {width: 500px;}
  .chart_title
  {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.4em;
  }




Chart and DataTable Example


  A YUI Charts Control and a DataTable Control may share a DataSource to display the same data.

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.



Widgets, Inc. Financial Summary 2003-2006
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";
  //used to format x axis labels
  YAHOO.example.numberToCurrency = function( value )
  {
    return YAHOO.util.Number.format(Number(value), {prefix: "$", thousandsSeparator: ","});
  }
  //manipulating the DOM causes problems in ie, so create after window fires "load"
  YAHOO.util.Event.addListener(window, "load", function()
  {
  //--- data
    YAHOO.example.annualIncome =
    [
      { year: 2003, revenue: 1246852, expense: 1123359, income: 123493 },
      { year: 2004, revenue: 2451876, expense: 2084952, income: 366920 },
      { year: 2005, revenue: 2917246, expense: 2587151, income: 330095 },
      { year: 2006, revenue: 3318185, expense: 3087456, income: 230729 }
    ];
    var incomeData = new YAHOO.util.DataSource( YAHOO.example.annualIncome );
    incomeData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    incomeData.responseSchema = { fields: [ "year", "revenue", "expense", "income" ] };
  //--- chart
    var seriesDef =
    [
      {
        xField: "revenue",
        displayName: "Revenue"
      },
      {
        xField: "expense",
        displayName: "Expense"
      },
      {
        type: "line",
        xField: "income",
        displayName: "Income"
      }
    ];
    var currencyAxis = new YAHOO.widget.NumericAxis();
    currencyAxis.labelFunction = "YAHOO.example.numberToCurrency";
    var mychart = new YAHOO.widget.BarChart( "chart", incomeData,
    {
      series: seriesDef,
      yField: "year",
      xAxis: currencyAxis,
      //only needed for flash player express install
      expressInstall: "yui_2.7.0b-assets/charts-assets/expressinstall.swf"
    });
  //--- data table
    var columns =
    [
      { key: "year", sortable: true, resizeable: true },
      { key: "revenue", formatter: "currency", sortable: true, resizeable: true },
      { key: "expense", formatter: "currency", sortable: true, resizeable: true },
      { key: "income", formatter: "currency", sortable: true, resizeable: true }
    ];
    var mytable = new YAHOO.widget.DataTable( "datatable", columns, incomeData,
      { sortedBy: { key: "year", dir: "asc" }
    });
  });



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