Chart-with-Legend-Example

YUI Library JavaScript DHTML


            

    
Chart with Legend 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
  {
    float: left;
    width: 450px;
    height: 300px;
  }
  .chart_title
  {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.4em;
  }




Chart with Legend Example


  A legend may be displayed with the YUI Charts Control by setting a few simple 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.



Survey: What is your favorite season?
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can install the latest version at the Adobe Flash Player Download Center.

  YAHOO.widget.Chart.SWFURL = "yui_2.7.0b-lib/charts/assets/charts.swf";
//--- data
  YAHOO.example.publicOpinion =
  [
    { response: "Summer", count: 564815 },
    { response: "Fall", count: 664182 },
    { response: "Spring", count: 248124 },
    { response: "Winter", count: 271214 },
    { response: "Undecided", count: 81845 }
  ]
  var opinionData = new YAHOO.util.DataSource( YAHOO.example.publicOpinion );
  opinionData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  opinionData.responseSchema = { fields: [ "response", "count" ] };
//--- chart
  var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
  {
    dataField: "count",
    categoryField: "response",
    style:
    {
      padding: 20,
      legend:
      {
        display: "right",
        padding: 10,
        spacing: 5,
        font:
        {
          family: "Arial",
          size: 13
        }
      }
    },
    //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)