Datatable Horizontal Stacked Bar Chart

Test

by bigwelly

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Languages</th>
            <th>Positive</th>
            <th>Neutral</th>
            <th>Negative</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>English</td>
            <td>50</td>
            <td>20</td>
            <td>25</td>
        </tr>
        <tr>
            <td>German</td>
            <td>25</td>
            <td>10</td>
            <td>12</td>
        </tr>
        <tr>
            <td>French</td>
            <td>20</td>
            <td>20</td>
            <td>17</td>
        </tr>
        <tr>
            <td>Spanish</td>
            <td>22</td>
            <td>4</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

CSS

.bar-chart-bar {
    background-color: #e8e8e8; 
    display: block; 
    position:relative; 
    width: 100%; 
    height: 20px; 
}
.bar {
    float: left; 
    height: 100%; 
}
.bar1 {
    background-color: green;
}
.bar2 {
    background-color: yellow;
}
.bar3 {
    background-color: red;
}

JavaScript

$(function(){
    $("#dTable").dataTable({
        "columns": [
                {
                    "title":"Languages"
                },
                {
                    "title":"Votes",
                    "render": function(data, type, row, meta){
                       // return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
                  return "";
                    }
                },
                {
                    "visible":false
                },
                {
                    "title": "Positive/Neutral/Negative",
                    "sortable":false,
                    "render": function(data, type, row, meta){
                    
                        return $("<div></div>", {
                            "class": "bar-chart-bar"
                        }).append(function(){
                            var bars = [];
                            for(var i = 1; i < row.length; i++){
                                bars.push($("<div></div>",{
                                    "class": "bar " + "bar" + i
                                }).css({
                                    "width": row[i] + "%"
                                }))
                            }
                            console.log(bars);
                            return bars;
                        }).prop("outerHTML")
                    }
                }
        ]
    });
});