Jscript graphing

[chandlermoss@gmail.com]

Hey everyone,I am currently working on a page that has a table which displays a number of graphs inside of it. I am using a free graphing resource I found which uses tables to graph and the script is shown below:

Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {    color = color || "#000";    var path = ["M", Math.round(x) + .5, Math.round(y) + .5, "L", Math.round(x + w) + .5, Math.round(y) + .5, Math.round(x + w) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y) + .5],        rowHeight = h / hv,        columnWidth = w / wv;    for (var i = 1; i < hv; i++) {        path = path.concat(["M", Math.round(x) + .5, Math.round(y + i * rowHeight) + .5, "H", Math.round(x + w) + .5]);    }    for (i = 1; i < wv; i++) {        path = path.concat(["M", Math.round(x + i * columnWidth) + .5, Math.round(y) + .5, "V", Math.round(y + h) + .5]);    }    return this.path(path.join(",")).attr({stroke: color});};$(function () {    $("#data").css({        position: "absolute",        left: "-9999em",        top: "-9999em"    });});window.onload = function () {    function getAnchors(p1x, p1y, p2x, p2y, p3x, p3y) {        var l1 = (p2x - p1x) / 2,            l2 = (p3x - p2x) / 2,            a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)),            b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y));        a = p1y < p2y ? Math.PI - a : a;        b = p3y < p2y ? Math.PI - b : b;        var alpha = Math.PI / 2 - ((a +  % (Math.PI * 2)) / 2,            dx1 = l1 * Math.sin(alpha + a),            dy1 = l1 * Math.cos(alpha + a),            dx2 = l2 * Math.sin(alpha + ,            dy2 = l2 * Math.cos(alpha + ;        return {            x1: p2x - dx1,            y1: p2y + dy1,            x2: p2x + dx2,            y2: p2y + dy2        };    }    // Grab the data    var labels = [],        data = [];    $("#data tfoot th").each(function () {        labels.push($(this).html());    });    $("#data tbody td").each(function () {        data.push($(this).html());    });        // Draw    var width = 800,        height = 250,        leftgutter = 30,        bottomgutter = 20,        topgutter = 20,        colorhue = .6 || Math.random(),        color = "hsb(" + [colorhue, .5, 1] + ")",        r = Raphael("holder", width, height),        txt = {font: '12px Helvetica, Arial', fill: "#fff"},        txt1 = {font: '10px Helvetica, Arial', fill: "#fff"},        txt2 = {font: '12px Helvetica, Arial', fill: "#000"},        X = (width - leftgutter) / labels.length,        max = Math.max.apply(Math, data),        Y = (height - bottomgutter - topgutter) / max;    r.drawGrid(leftgutter + X * .5 + .5, topgutter + .5, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "#333");    var path = r.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),        bgp = r.path().attr({stroke: "none", opacity: .3, fill: color}),        label = r.set(),        is_label_visible = false,        leave_timer,        blanket = r.set();    label.push(r.text(60, 12, "24 hits").attr(txt));    label.push(r.text(60, 27, "22 September 2008").attr(txt1).attr({fill: color}));    label.hide();    var frame = r.popup(100, 100, label, "right").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7}).hide();    var p, bgpp;    for (var i = 0, ii = labels.length; i < ii; i++) {        var y = Math.round(height - bottomgutter - Y * data[i]),            x = Math.round(leftgutter + X * (i + .5)),            t = r.text(x, height - 6, labels[i]).attr(txt).toBack();        if (!i) {            p = ["M", x, y, "C", x, y];            bgpp = ["M", leftgutter + X * .5, height - bottomgutter, "L", x, y, "C", x, y];        }        if (i && i < ii - 1) {            var Y0 = Math.round(height - bottomgutter - Y * data[i - 1]),                X0 = Math.round(leftgutter + X * (i - .5)),                Y2 = Math.round(height - bottomgutter - Y * data[i + 1]),                X2 = Math.round(leftgutter + X * (i + 1.5));            var a = getAnchors(X0, Y0, x, y, X2, Y2);            p = p.concat([a.x1, a.y1, x, y, a.x2, a.y2]);            bgpp = bgpp.concat([a.x1, a.y1, x, y, a.x2, a.y2]);        }        var dot = r.circle(x, y, 4).attr({fill: "#000", stroke: color, "stroke-width": 2});        blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0}));        var rect = blanket[blanket.length - 1];        (function (x, y, data, lbl, dot) {            var timer, i = 0;            rect.hover(function () {                clearTimeout(leave_timer);                var side = "right";                if (x + frame.getBBox().width > width) {                    side = "left";                }                var ppp = r.popup(x, y, label, side, 1);                frame.show().stop().animate({path: ppp.path}, 200 * is_label_visible);                label[0].attr({text: data + " APM"}).show().stop().animateWith(frame, {translation: [ppp.dx, ppp.dy]}, 200 * is_label_visible);                label[1].attr({text: lbl + " GameTime to go here"}).show().stop().animateWith(frame, {translation: [ppp.dx, ppp.dy]}, 200 * is_label_visible);                dot.attr("r", 6);                is_label_visible = true;            }, function () {                dot.attr("r", 4);                leave_timer = setTimeout(function () {                    frame.hide();                    label[0].hide();                    label[1].hide();                    is_label_visible = false;                }, 1);            });        })(x, y, data[i], labels[i], dot);    }    p = p.concat([x, y, x, y]);    bgpp = bgpp.concat([x, y, x, y, "L", x, height - bottomgutter, "z"]);    path.attr({path: p});    bgp.attr({path: bgpp});    frame.toFront();    label[0].toFront();    label[1].toFront();    blanket.toFront();};

My question is because there are no direct calls for this script and it just pulls the data from the table labeled "data" how can I get this to work for multiple graphs? I am able to concatenate a count to the end of each data table so they each read data0, data1, data2, etc but I don't see how to feed the individual tables to the included javascript. I apologize for my noob status for jscript. Any help would be appreciated.Thanks again,StackOverflowEdit: This is the section of code inside the php document that shows the table being made:

$content .= '		<tr><td>'.$anim.'</td>		<td>'.$el['Realm'].'</td>		<td>'.$el['GameName'].'</td>		<td>'.$el['DatePlayed'].'</td>		<td>'.$el['Player1'].'</td>	<td>'.'<img src="images/'.$el['P1Race'].'.jpg" alt="P1Race" width="40" height="30"/> '.'</td>	<td>'. '</td>	<td>'.'<img src="images/'.$el['P2Race'].'.jpg" alt="P2Race" width="40" height="30"/> '.'</td>		<td>'.$el['Player2'].'</td>		<td>'.$el['MapName'].'</td>		<td>'. '</td>		<td>'.'<a href="'.$el['DownloadLink'].'"><img border="0" src="images/Download.gif" alt="Download" width="30" height="30" align:"center"/></a></p>'.'</td></tr>			<tr>'. '<td colspan="12"><div id="id'.$count.'" style="width: 1000; background: #98bf21; display:none">		<table id="data">			<tfoot>				<tr>					<th>1</th>					<th>2</th>				</tr>			</tfoot>			<tbody>				<tr>					<td>8</td>					<td>14</td>				</tr>				<div id="holder"></div>			</tbody>		</table></div></td>		</tr>';

[chandlermoss@gmail.com]

Hey all I figured it out on my own; I fed the max number of graphs to the URL via a GET and am looping from zero to that value to create the individualized graphs. Huzzah!