fixed the description option in data tables, which pushes w3c#180 sli…

…ghtly closer toward completion.

css/metricsgraphics.css

@@ -406,4 +406,10 @@ td.data-table {
 
 .table-number {
 
+}
+
+td.table-text {
+    padding-left:30px;
+    font-style:italic;
+    opacity:.8;
 }

js/main.js

@@ -859,8 +859,8 @@ $(document).ready(function() {
     // data tables
 
     var table_data = [
-        {'year': 1852,'value1': 10.2, 'value2': 1004.43, 'geo': 'United Kingdom', 'description': "Here is the first thing."},
-        {'year': 1901,'value1': 10.1, 'value2': 543.23, 'geo': 'United States', 'description': "You Ess of Eh."},
+        {'year': 1852,'value1': 10.2, 'value2': 1004.43, 'geo': 'United Kingdom', 'description': "Having a way of describing a row can be useful."},
+        {'year': 1901,'value1': 10.1, 'value2': 543.23, 'geo': 'United States', 'description': "Here is some text about the United States. These made-up numbers."},
         {'year': 1732,'value1': 4.3, 'value2': 14.92, 'geo': 'France', 'description': "France has small numbers."},
         {'year': 1945,'value1': 2.9, 'value2': 243.11, 'geo': 'Brazil', 'description': "Brazil, Brazil."},
         {'year': 1910,'value1': 1.0, 'value2': 5432.3, 'geo': 'India', 'description': "Last description in the whole thing."}
@@ -875,6 +875,7 @@ $(document).ready(function() {
         .title( {accessor: 'geo', secondary_accessor:'year', label: 'country'})
         .number({accessor: 'value1', label: 'size'})
         .number({accessor: 'value2', label: 'score'})
+        .text({accessor: 'description', width:240})
         .display();
 
 

src/charts/table.js

@@ -35,6 +35,7 @@ function data_table(args){
 		var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
 		args.type='text';
 		this.args.columns.push(args);
+		return this;
 	}
 	this.bullet = function(){
 		/*
@@ -112,7 +113,7 @@ function data_table(args){
 					.classed('table-text',   td_type=='text')
 					.style('width', args.columns[j].width)
 					.style('font-size', args.columns[j].font_size)
-					.style('text-align', td_type=='title' ? 'left' : 'right');
+					.style('text-align', td_type=='title' || td_type=='text' ? 'left' : 'right');
 
 				if (td_type=='title'){
 					td.append('div').text(td_text);