Apologies for the delays, busy week and I rebuilt my media center PC / NAS over the weekend.

I just dug into tossing together that rewrite I mentioned -- looking at your two different table types, they are easily doable but your implementation has many, MANY woes.

The first of which is all the iframes. In general frames are accessibility trash and should not be used for any content of importance -- it's a cute toy that you should reserve for things like video and advertising embeds, NOT for building your entire site!

The second problem is you're doing WAY too much of the data handling in a manner that doesn't gracefully degrade. WHENEVER POSSIBLE you should try to write your HTML to only contain the DATA/CONTENT using semantic markup so that non-visual users, non-scripting users, and other such folks aren't left out in the cold. You then ENHANCE that base markup with JavaScript.

To that end, let's start out by taking a step back and going "what is this data" and "how can we best organize it for ALL users as if CSS, JavaScript, and even the default appearance of HTML does not exist. After all that's what HTML is for, saying what things ARE and NOT what you want them to look like!

So if we take a gander what we have here are obvious sections and subsections... the data itself is a section so that should probably start with a H2 or H3 depending on the structure of the document it is going into. Likewise each of the subsections should START with the date to say what those sections are, being H3 if the main header is a H2, H4 if it's a H3, and so forth.

Remember, numbered headings indicate the start of a subsection of the higher order (lower numbered) header before it. that's what they're for. (and why HTML 5's <section> tag is pointless redundant crap)

Then the individual data points seem to be lists inside those sections -- lists in no particular order which we have a tag for, it's called UL.

Code:
<div class="chart">
	<!--
		structurally you should have an appropriate depth heading here to
		describe the data that follows, I'm assuming H2 for now.
	-->
	<h2>Describe this chart / section here</h2>
	<div>
		<h3>1999</h3>
		<ul>
			<li>68 : 20-30 yrs/n</li>
			<li>82 : 20-30 yrs/y</li>
			<li>52 : &lt; 20/n</li>
			<li>70 : &lt; 20/y</li>
			<li>64 : &gt; 30/n</li>
			<li>78 : &gt; 30/y</li>
		</ul>
	</div><div>
		<h3>2001</h3>
		<ul>
			<li>58 : 20-30 yrs/n</li>
			<li>72 : 20-30 yrs/y</li>
			<li>42 : &lt; 20/n</li>
			<li>60 : &lt; 20/y</li>
			<li>24 : &gt; 30/n</li>
			<li>68 : &gt; 30/y</li>
		</ul>
	</div><div>
		<h3>2003</h3>
		<ul>
			<li>68 : 20-30 yrs/n</li>
			<li>82 : 20-30 yrs/y</li>
			<li>52 : &lt; 20/n</li>
			<li>70 : &lt; 20/y</li>
			<li>64 : &gt; 30/n</li>
			<li>78 : &gt; 30/y</li>
		</ul>
	</div><div>
		<h3>2005</h3>
		<ul>
			<li>45 : 20-30 yrs/n</li>
			<li>76 : 20-30 yrs/y</li>
			<li>37 : &lt; 20/n</li>
			<li>52 : &lt; 20/y</li>
			<li>45 : &gt; 30/n</li>
			<li>20 : &gt; 30/y</li>
		</ul>
	</div><div>
		<h3>2007</h3>
		<ul>
			<li>68 : 20-30 yrs/n</li>
			<li>82 : 20-30 yrs/y</li>
			<li>52 : &lt; 20/n</li>
			<li>70 : &lt; 20/y</li>
			<li>64 : &gt; 30/n</li>
			<li>78 : &gt; 30/y</li>
		</ul>
	</div>
<!-- .chart --></div>
That is a decent base semantic markup with a few obvious sectional div thrown in -- that's what you should probably have in your HTML if this isn't dynamic data being updated in realtime on the fly. (I plugged in some smaller numbers to 2001 and 2005 so we can make sure the scripting handles those data-points correctly.)

To bend that to our will for the tooltips I would place a DIV inside each LI, and then put a span around the actual data value so our scripting can isolate it. Other bits of useful information for the scripting to leverage can/could be passed on the div.chart as data- attributes. Because of how building these charts works we probably also need a separate div after the H2 to wrap all those sub-div.

Code:
<div
	class="chart" 
	data-chartRowLabel="Number of Births"
	data-chartKeys="20-30 yrs/n,20-40 yrs/y,< 20/n,< 20/y,> 30/n,> 30/y"
	data-chartColors="#EBE,#FCC,#FAA,#FC8,#EE8,#BE9"
>
	<!--
		structurally you should have an appropriate depth heading here to
		describe the data that follows, I'm assuming H2 for now.
	-->
	<h2>Bar Chart</h2>
	<div class="chartData">
		<div>
			<h3>1999</h3>
			<ul>
				<li><div><span>68</span> : 20-30 yrs/n</div></li>
				<li><div><span>82</span> : 20-30 yrs/y</div></li>
				<li><div><span>52</span> : &lt; 20/n</div></li>
				<li><div><span>70</span> : &lt; 20/y</div></li>
				<li><div><span>64</span> : &gt; 30/n</div></li>
				<li><div><span>78</span> : &gt; 30/y</div></li>
			</ul>
		</div><div>
			<h3>2001</h3>
			<ul>
				<li><div><span>58</span> : 20-30 yrs/n</div></li>
				<li><div><span>72</span> : 20-30 yrs/y</div></li>
				<li><div><span>42</span> : &lt; 20/n</div></li>
				<li><div><span>60</span> : &lt; 20/y</div></li>
				<li><div><span>24</span> : &gt; 30/n</div></li>
				<li><div><span>68</span> : &gt; 30/y</div></li>
			</ul>
		</div><div>
			<h3>2003</h3>
			<ul>
				<li><div><span>68</span> : 20-30 yrs/n</div></li>
				<li><div><span>82</span> : 20-30 yrs/y</div></li>
				<li><div><span>52</span> : &lt; 20/n</div></li>
				<li><div><span>70</span> : &lt; 20/y</div></li>
				<li><div><span>64</span> : &gt; 30/n</div></li>
				<li><div><span>78</span> : &gt; 30/y</div></li>
			</ul>
		</div><div>
			<h3>2005</h3>
			<ul>
				<li><div><span>45</span> : 20-30 yrs/n</div></li>
				<li><div><span>76</span> : 20-30 yrs/y</div></li>
				<li><div><span>37</span> : &lt; 20/n</div></li>
				<li><div><span>52</span> : &lt; 20/y</div></li>
				<li><div><span>45</span> : &gt; 30/n</div></li>
				<li><div><span>20</span> : &gt; 30/y</div></li>
			</ul>
		</div><div>
			<h3>2007</h3>
			<ul>
				<li><div><span>68</span> : 20-30 yrs/n</div></li>
				<li><div><span>82</span> : 20-30 yrs/y</div></li>
				<li><div><span>52</span> : &lt; 20/n</div></li>
				<li><div><span>70</span> : &lt; 20/y</div></li>
				<li><div><span>64</span> : &gt; 30/n</div></li>
				<li><div><span>78</span> : &gt; 30/y</div></li>
			</ul>
		</div>
	<!-- .chartData --></div>
<!-- .chart --></div>
... and other than including a <script> tag to point at an EXTERNAL script, that's ALL that should be in the markup for each chart.

Though I was unclear on that "number of births" text, perhaps that should be the H2?

In any case, from there a decent script would grab ALL elements with the class .chart, and apply any and all new elements or dynamic style needed to turn that into a chart with tooltips.

I have made a live demo of doing exactly that here:

Gracefully Degrading Auto Chart Demo

As with all my examples the directory:

Index of /for_others/craigc4/ - CutCodeDown

Is unlocked for easy access to the gooey bits and pieces... I also tossed a .rar of the whole shebang in there for you.

The code puts three different versions of the same table up there, the bar chart, the stacked chart, and what users will get when JavaScript is blocked.

I had to animate the tooltips to the left because I used the table-cell approach to auto-calculate our widths, and table-cells cannot be depth-sorted with z-index, it's just flat-out ignored. I think that works better anyways since on the first few it overlaps the row label -- CSS tooltips have the 'flaw' that you have to worry about the window edge cutting them off.

It does have the problem that legacy IE support is 'iffy'. I would consider using feature detection to make the script abort for IE9/earlier if that's really an issue you care about. It works, but the "stacked" version will be top aligned instead of bottom aligned.

If I have time later I'll document this, though I've got a stream of parts coming in today for three separate system builds. Some retirement.

All in all though this is why I say write as if JavaScript doesn't exist FIRST. I've said it thousands of times the past ten years: "GOOD JavaScript should enhance an already working page." More so when it comes to data processing as if you can keep the HTML simple and the JavaScript automated, you don't have to do as much grunt work server-side nor does one end up with the usability flaws things like CSR (client-side rendering) bring to the table.