AutoColumnDetection

Detect potential columns based on left alignment and render the separator

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div id="container" style="position:absolute;top:50px"></div>
<span id="message"></span>

CSS

#message {
    color: #f00
}

#data {
    position:absolute;
    display:none;
}

#columns {
    position:absolute;
    display:none;
}

JavaScript

window.viewBag = window.viewBag || {};

function initializeData() {
    viewBag.Data = [
        {x1: 10, y1: 10, data:'1000'},
        {x1: 50, y1: 10, data:'Red Pollo'},
        {x1:180, y1: 10, data:' 1'},
        {x1:220, y1: 10, data:'25.00'},
        {x1:290, y1: 10, data:'25.00'},
        
        {x1: 10, y1: 30, data:'2000'},
        {x1: 50, y1: 30, data:'Black Pollo'},
        {x1:180, y1: 30, data:' 2'},
        {x1:220, y1: 30, data:'30.00'},
        {x1:290, y1: 30, data:'60.00'},
        
        {x1: 10, y1: 50, data:'3000'},
        {x1: 50, y1: 50, data:'Nissin Noodle'},
        {x1:180, y1: 50, data:' 6'},
        {x1:220, y1: 50, data:' 2.00'},
        {x1:290, y1: 50, data:'12.00'},
        
        {x1: 10, y1: 70, data:'4000'},
        {x1: 50, y1: 70, data:'Pencil'},
        {x1:180, y1: 70, data:'10'},
        {x1:220, y1: 70, data:' 1.00'},
        {x1:290, y1: 70, data:'10.00'}        
    ];
}

function autoSuggestColumns(range)
{
    var rx1 = range.x1, 
        rx2 = range.x2, 
        ry1 = range.y1, 
        ry2 = range.y2;
    
    //grab all data points within the range boundary
    var data = _.filter(viewBag.Data, function(r) {
        return (r.x1 >= rx1 && 
                r.y1 >= ry1 && 
                r.x1 <= rx2 && 
                r.y1 <= ry2);
    });
    
    //group the data by their y1 coordinate
    var dataGroup = _.groupBy(data, function(r) {
        return r.y1;
    });
    
    var keys = _.keys(dataGroup);
    var klen = keys.length;
    var top = parseInt( 
            _.min(keys, function(k) { return parseInt(k, 10); }),10);
    var bottom = parseInt(
        _.max(keys, function(k) { return parseInt(k, 10); }),10) +20;                       
    
    var cx1s = [];
    
    //for each row
    _.each(keys, function(z) {
        //get the row data
        var crow = dataGroup[z];
        //for each row data
        _.each(crow, function(r) {
            //get current row data x1 coordinate
            var rx1...