Load this file to convert table.yui-line and table.yui-pie to line and pie charts using JS and Flash.

YUI Charts from Tables - Line, Pie

/*
  Converts well-formed HTML tables with class 'yui-line' or 'yui-pie'
  to Flash charts, using YUI Loader and YUI charts.

  Tables for pie charts look like:

  +--------------------------------------------------+
  |                                     | Total      |
  +-------------------------------------+------------+
  | Item 1                              | 16         |
  +-------------------------------------+------------+
  | Item 2                              | 20         |
  +-------------------------------------+------------+

  Tables for line charts can look like:

  +--------------------------------------------------+
  |                         | Jan | Feb | Total      |
  +-------------------------------------+------------+
  | Item 1                  | 5   | 11  | 16         |
  +-------------------------------------+------------+
  | Item 2                  | 32  | 10  | 42         |
  +-------------------------------------+------------+

  Based on Christian Heilmann's example:
  http://yuiblog.com/blog/2008/01/17/tables-and-charts/

  Please share your improvements.

  Being simple at heart, I use by simply including "charts.js" after all of my tables.

*/

var tablesToCharts = new YAHOO.util.YUILoader({
  require: ['charts'],
  onSuccess: function(){
    var Dom = YAHOO.util.Dom;
    
    var getInnerHtml = function(el) {
        return el.innerHTML;
    };
    var fielderize = function(str) {
        return str.toLowerCase().replace(new RegExp('[\ _-]','g'),'');
    };
    
    YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
    var expressInstall = 'http://yui.yahooapis.com/2.6.0/build/charts/assets/expressinstall.swf';
    
    var pieTables = Dom.getElementsByClassName('yui-pie', 'table');
    Dom.batch(pieTables, function(curTable) {
      var chartDiv = document.createElement('div');
      Dom.addClass(chartDiv, 'yuiPieChart');
 	  Dom.setStyle(chartDiv, 'height', '300px');
	  Dom.setStyle(chartDiv, 'width', '100%');
      Dom.insertBefore(chartDiv, curTable);
      
      var data = new YAHOO.util.LocalDataSource(curTable);
      data.responseSchema = { fields: ['caption', 'count'] };
      
      var chart = new YAHOO.widget.PieChart(chartDiv, data, {
        categoryField: 'caption',
        dataField: 'count',
        style:
        {
            legend:
            {
                display: "right",
                padding: 10,
                spacing: 2,
                font:
                {
                    family: "Helvetica",
                    size: 10
                }
            }
        }
      });
      Dom.setStyle(curTable, 'display', 'none');
    });


    var parseTable = function(request, oFullResponse) {
        var oParsedResponse = {results:[]};
        var originalFields = [];
        var fields = this.responseSchema.fields;
        var headings = [];
        headings = Dom.getElementsByClassName('mth', 'th', oFullResponse).map(getInnerHtml);            
        for(var i=0; i<headings.length; i++) {
            oParsedResponse.results[i] = { month: headings[i] };
        }
        for(var i=0; i<oFullResponse.tBodies.length; i++) {
            var elTbody = oFullResponse.tBodies[i];
            for(var j=0; j<elTbody.rows.length; j++) {
                for(var k=1; k<elTbody.rows[j].cells.length; k++) {
                    var curCell = elTbody.rows[j].cells[k].innerHTML;
                    oParsedResponse.results[k-1][fields[j]] = elTbody.rows[j].cells[k].innerHTML;
                }
            }
        }
        return oParsedResponse;
      };

    function getSeriesAndSchema(elTable) {
        var seriesDef = [];
        var responseSchema = {};
        var originalFields = [], fields = [];

        for(var i=0; i<elTable.tBodies.length; i++) {
               var elTbody = elTable.tBodies[i];
               // Iterate through each TR
               for(var j=elTbody.rows.length-1; j>-1; j--) {
                   var elRow = elTbody.rows[j];
                originalFields.push(elRow.cells[0].innerHTML);
            }
        }
        fields = originalFields.map(fielderize);
        for(var j=elTbody.rows.length-1; j>-1; j--) {
            seriesDef[j] = { displayName: originalFields[j], yField: fields[j] };
        }
        fields = fields.reverse();
        fields.push('month');
        responseSchema = { fields: fields };

		seriesDef = seriesDef.reverse();
		
        return { series: seriesDef, schema: responseSchema };
    }

    function getMinimumAndMaximumY(elTable) {
        Number.prototype.upToNearest = function(num) {
            var sig = (this+'');
            sig = sig.split('.');
            sig = sig[0];
            sig = sig.length - 1;
            sig = Math.pow(10, sig);
            var t = Math.round(this/sig)*sig;
            if(t<this) {
                t = t + sig;
            }
            return t;
        };
        
        var vals = $A(elTable.getElementsByTagName('td'));
        var min = 0, max = 10;
        
        vals = vals.map(getInnerHtml);
        
        for(var i=0; i<vals.length; i++) {
            var v = parseFloat(vals[i]);
            if(v < min) { min = v; }
            if(v > max) { max = v; }
        }
        min = min.upToNearest(10);
        max = max.upToNearest(10);
        return { minimum: min, maximum: max };
    }
    
    var lineTables = Dom.getElementsByClassName('yui-line', 'table');
    Dom.batch(lineTables, function(curTable) {
      var chartDiv = document.createElement('div');
      Dom.addClass(chartDiv, 'yuiLineChart');
 	  if (Dom.hasClass(curTable, 'extra-tall')) {
 	  	Dom.setStyle(chartDiv, 'height', '500px');
	  } else {
		Dom.setStyle(chartDiv, 'height', '300px');
	  }
	  Dom.setStyle(chartDiv, 'width', '100%');
      Dom.insertBefore(chartDiv, curTable);

      var tableMeta = getSeriesAndSchema(curTable);

      var dataSrc = new YAHOO.util.LocalDataSource(curTable);
      dataSrc.responseSchema = tableMeta.schema;
      dataSrc.parseHTMLTableData = parseTable;

      var chart = new YAHOO.widget.LineChart(chartDiv, dataSrc, {
        series: tableMeta.series,
        xField: 'month',
        style:
        {
            legend:
            {
                display: "right",
                padding: 10,
                spacing: 2,
                font:
                {
                    family: "Helvetica",
                    size: 10
                }
            },
            xAxis:
            {
                majorTicks:
                {
                    display: 'outside'
                }
            }
        }
      });
    
      var myAxis = new YAHOO.widget.NumericAxis(); 
      var minAndMax = getMinimumAndMaximumY(curTable);
      myAxis.alwaysShowZero = true;
      myAxis.maximum = minAndMax.maximum;
      myAxis.minimum = minAndMax.minimum;
      chart.set('yAxis', myAxis);
    
      YAHOO.util.Dom.setStyle(curTable, 'display', 'none');
    });
  }
});

if(document.location.toString().indexOf('http')!==-1) {
  tablesToCharts.insert();
}