DC.js - Scatter Plot Not Updating

by Sourabh Tewari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<script src="https://rawgithub.com/square/crossfilter/master/crossfilter.js"></script>
<script src="https://rawgithub.com/mbostock/d3/master/d3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/dc.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/NickQiZhu/dc.js/master/dc.css">
<div id="ubc-graph" />

<table id="dc-data-table" class="list table table-striped table-bordered">
            <thead>
                <tr>
                  <th>Country</th>
                  <th>Users</th>
                </tr>
            </thead>
        </table>

CSS

table, th, tr, td {
    border: 1px solid black;
}

JavaScript

var countries = ["Russia", "USA", "Ukraine"];
var chartExample = {
    initChart: function (data) {
        var chart = dc.barChart("#ubc-graph");

        var ndx = crossfilter(data),
            countryDimension = ndx.dimension(function (d) {
                return d.country;
            }),
            countryGroup = countryDimension.group().reduceSum(function (d) {
                return d.users;
            });
        
        var datatable = $("#dc-data-table").dataTable({
                "bPaginate": true,
                "bLengthChange": false,
                "bFilter": false,
                "bSort": true,
                "bInfo": false,
                "bAutoWidth": false,
                "bDeferRender": true,
                "aaData": countryDimension.top(Infinity),
                "bDestroy": true,
                "aoColumns": [
                    { "mData": "country", "sDefaultContent": ""},
                    { "mData": "users", "sDefaultContent": " " }
                ]
            });

        chart.width(500)
            .height(400)
            .gap(100)
        .centerBar(true)
            .x(d3.scale.ordinal().domain(countries))
            .yAxisLabel("User Count")
            .renderHorizontalGridLines(true)
            .dimension(countryDimension)
            .group(countryGroup)
            .xUnits(dc.units.ordinal);
        
        function RefreshTable() {
                dc.events.trigger(function () {
                    alldata = countryDimension.top(Infinity);
                    datatable.fnClearTable();
                    datatable.fnAddData(alldata);
                    datatable.fnDraw();
                });
            }
        
            for (var i = 0; i < dc.chartRegistry.list().length; i++) {
                var chartI = dc.chartRegistry.list()[i];
                chartI.on("filtered", RefreshTable);
            }
        
        dc.renderAll();
    },
    initData: function () {
        var data = [];

        for...