Demonstrating table parsing

Create prototype for ISSO FY Budget Status report

by Jeromy French

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div class="alert alert-info">
    <strong>Did you see that?</strong>
    <p>The following graphs and tabs are all "injected" into the DOM based on the data within the tables.</p>
    <p><small>Well, to be perfectly honest, the "combo" tab is using canned data, but the others are using data parsed from the source tables.</small></p>
</div>
<div class="row-fluid">
    <div class="span12">
<table class="table table-striped table-bordered table-condensed budget radar column-stacked combo">
    <caption><h2><a href="http://www.appliedinter.net" target="www.appliedinter.net"><abbr title="Applied Internet Technologies">AIT</abbr></a><br /><small>Comptroller's Obligation 96.7%</small></h2></caption>
    <thead>
        <tr>
            <th class="chart-ignore"><span class="hidden">Division</span></th>
            <th class="data-label"><abbr title="Mechanical Systems">MS</abbr></th>
            <th class="data-label">F</th>
            <th class="data-label">I&amp;C</th>
            <th class="data-label">PGMS</th>
            <th class="data-label">CP</th>
            <th class="chart-ignore">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row" data-base-color="rgb(149, 206, 255)">DIR APPROVED</td>
            <td class="number">10168325</td>
            <td class="number">9154898</td>
            <td class="number">12701750</td>
            <td class="number">17733027</td>
            <td class="number">4000000</td>
            <td class="number chart-ignore">53758000</td>
        </tr>
        <tr>
            <td...

CSS

.hidden{display:relative;margin-left: -1000px;}
td.number{text-align:right;}
.wrap_chart_table > h2{margin-left:auto; margin-right:auto; text-align:center;}

JavaScript

var $budget_tables=$('table.budget');

$budget_tables.each(function(table_ii){
	    
	//resize tables's container to make room for a canvas chart, which we also inject here
	$(this).wrap('<div class="wrap_chart_table"></div>').before('<ul id="graphset_'+table_ii+'" class="nav nav-tabs"></ul><div class="tab-content"></div><br />');
	
	//remove table's caption
    $caption=$(this).find('caption').remove();
	$title_text=$caption.html();
	$(this).closest('div.wrap_chart_table').prepend( $title_text );
		
		
    //size chart to match the table's dimensions
    var table_height=$(this).height()*2,
        table_width=$(this).width(),
        //assemble the chart criteria labels from the table's th cells
        criteria_labels=$(this).find('thead').find('th').not('.chart-ignore').map(function(i,e) { return e.innerText; }),
        compiled_datasets=[];
		
    //assemble the data from the table's table body
    $(this).find('tbody').find('tr').not('.chart-ignore').each(function(row_index){
        //      console.log('row '+row_index);
        
        var plot_data=$(this).find('td.number').not('.chart-ignore').map(function(i,e) { return Math.floor(e.innerText); }).get(),
            base_color=$(this).find('td[scope="row"]').attr('data-base-color');
        
        //      console.log(plot_data);
        //      console.log(base_color);
        
        //get the series data from the chart
        compiled_datasets.push( {
            name: $(this).find('td[scope="row"]').html(),
            data: plot_data,
            pointPlacement: 'on',
            color: base_color
        } );
        
    });

    //any table classed as `combo` gets graphed in a couple of different ways
	$(this).filter('.combo').each(function(){
	
		//create a tab for the chart
		$(this).siblings('ul.nav-tabs').prepend('<li><a href="#combo_'+table_ii+'" data-toggle="tab">Overview</a></li>');
		
		//size chart to match the table's dimensions
		var...