Skinning-a-Chart

YUI Library JavaScript DHTML


            

    
Skinning a Chart 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: 580px;
    height: 400px;
  }
  
  .chart_title
  {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.4em;
  }




Skinning a Chart Example


  This example demonstrates how to modify the YUI Charts Control's styles to give it a custom appearance.

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.



Wilson's Supermarket - Product Comparison
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.salesComparison =
  [
    { month: "Oct", pork: 1354, beef: 1442 },
    { month: "Nov", pork: 1326, beef: 1496 },
    { month: "Dec", pork: 1292, beef: 1582 },
    { month: "Jan", pork: 1387, beef: 1597 },
    { month: "Feb", pork: 1376, beef: 1603 }
  ];
  var salesData = new YAHOO.util.DataSource( YAHOO.example.salesComparison );
  salesData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  salesData.responseSchema = { fields: [ "month", "pork", "beef" ] };
//--- chart
  var seriesDef =
  [
    {
      yField: "pork",
      displayName: "Sales of Pork",
      style:
      {
        image: "yui_2.7.0b-assets/charts-assets/tube.png",
        mode: "no-repeat",
        color: 0x2e434d,
        size: 40
      }
    },
    {
      yField: "beef",
      displayName: "Sales of Beef",
      style:
      {
        image: "yui_2.7.0b-assets/charts-assets/tube.png",
        mode: "no-repeat",
        color: 0xc2d81e,
        size: 40
      }
    }
  ];
  var mychart = new YAHOO.widget.ColumnChart( "chart", salesData,
  {
    series: seriesDef,
    xField: "month",
    style:
    {
      border: {color: 0x96acb4, size: 12},
      font: {name: "Arial Black", size: 14, color: 0x586b71},
      dataTip:
      {
        border: {color: 0x2e434d, size: 2},
        font: {name: "Arial Black", size: 13, color: 0x586b71}
      },
      xAxis:
      {
        color: 0x2e434d
      },
      yAxis:
      {
        color: 0x2e434d,
        majorTicks: {color: 0x2e434d, length: 4},
        minorTicks: {color: 0x2e434d, length: 2},
        majorGridLines: {size: 0}
      }
    },
    //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)