Charts-Quickstart-Example

YUI Library JavaScript DHTML


            

    
Charts Quickstart 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;
  }
  .chart_title
  {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.4em;
  }




Charts Quickstart Example


  This example is a demonstration of the YUI Chart Control's basic features.

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: 880.00, utilities: 894.68 },
    { month: "February", rent: 880.00, utilities: 901.35 },
    { month: "March", rent: 880.00, utilities: 889.32 },
    { month: "April", rent: 880.00, utilities: 884.71 },
    { month: "May", rent: 910.00, utilities: 879.811 },
    { month: "June", rent: 910.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
  var seriesDef =
  [
    { displayName: "Rent", yField: "rent" },
    { displayName: "Utilities", yField: "utilities" }
  ];
  YAHOO.example.formatCurrencyAxisLabel = function( value )
  {
    return YAHOO.util.Number.format( value,
    {
      prefix: "$",
      thousandsSeparator: ",",
      decimalPlaces: 2
    });
  }
  YAHOO.example.getDataTipText = function( item, index, series )
  {
    var toolTipText = series.displayName + " for " + item.month;
    toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series.yField] );
    return toolTipText;
  }
  var currencyAxis = new YAHOO.widget.NumericAxis();
  currencyAxis.minimum = 800;
  currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
  var mychart = new YAHOO.widget.LineChart( "chart", myDataSource,
  {
    series: seriesDef,
    xField: "month",
    yAxis: currencyAxis,
    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)