YUI Library JavaScript DHTML


            

    
Charts in a TabView

/*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;
  }
  .chart_title
  {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.4em;
  }
  #tabContainer
  {
    width: 520px;
  }




Charts in a TabView


  This example uses the YUI Charts Control and the TabView Control to display different views of the same DataSource.

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



  YAHOO.widget.Chart.SWFURL = "yui_2.7.0b-lib/charts/assets/charts.swf";
//--- DataSource
  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" ]
  };
//--- tabView
  //Create a TabView
  var tabView = new YAHOO.widget.TabView();
  //Add a tab for the Bar Chart
  tabView.addTab( new YAHOO.widget.Tab({
      label: 'Bar Chart',
      content: 'Bar Chart

',
      active: true
  }));
  //Add a tab for the Line Chart
  tabView.addTab( new YAHOO.widget.Tab({
      label: 'Line Chart',
      content: 'Line Chart'
  }));
  //Add a tab for the Column Chart
  tabView.addTab( new YAHOO.widget.Tab({
      label: 'Column Chart',
      content: 'Column Chart'
  }));
  //Append TabView to its container div
  tabView.appendTo('tabContainer');
//--- chart
  //series definition for Column and Line Charts
  var seriesDef =
  [
    { displayName: "Rent", yField: "rent" },
    { displayName: "Utilities", yField: "utilities" }
  ];
  //series definition for Bar Chart
  var barChartSeriesDef =
  [
    { displayName: "Rent", xField: "rent" },
    { displayName: "Utilities", xField: "utilities" }
  ];
  //format currency
  YAHOO.example.formatCurrencyAxisLabel = function( value )
  {
    return YAHOO.util.Number.format( value,
    {
      prefix: "$",
      thousandsSeparator: ",",
      decimalPlaces: 2
    });
  }
  //return the formatted text
  YAHOO.example.getDataTipText = function( item, index, series, axisField )
  {
    var toolTipText = series.displayName + " for " + item.month;
    toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel( item[series[axisField]] );
    return toolTipText;
  }
  //DataTip function for the Line Chart and Column Chart
  YAHOO.example.getYAxisDataTipText = function( item, index, series )
  {
    return YAHOO.example.getDataTipText(item, index, series, "yField");
  }
  //DataTip function for the Bar Chart
  YAHOO.example.getXAxisDataTipText = function( item, index, series )
  {
    return YAHOO.example.getDataTipText(item, index, series, "xField");
  }
  //create a Numeric Axis for displaying dollars
  var currencyAxis = new YAHOO.widget.NumericAxis();
  currencyAxis.minimum = 800;
  currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
  //Create Line Chart
  var lineChart = new YAHOO.widget.LineChart( "linechart", myDataSource,
  {
    series: seriesDef,
    xField: "month",
    yAxis: currencyAxis,
    dataTipFunction: YAHOO.example.getYAxisDataTipText,
    //only needed for flash player express install
    expressInstall: "yui_2.7.0b-assets/charts-assets/expressinstall.swf"
  });
  //Create Bar Chart
  var barChart = new YAHOO.widget.BarChart( "barchart", myDataSource,
  {
    series:barChartSeriesDef,
    yField: "month",
    xAxis: currencyAxis,
    dataTipFunction: YAHOO.example.getXAxisDataTipText,
    //only needed for flash player express install
    expressInstall: "yui_2.7.0b-assets/charts-assets/expressinstall.swf"
  });
  //Create Column Chart
  var columnChart = new YAHOO.widget.ColumnChart( "columnchart", myDataSource,
  {
    series: seriesDef,
    xField: "month",
    yAxis: currencyAxis,
    dataTipFunction: YAHOO.example.getYAxisDataTipText,
    //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)