DC.js - Scatter Plot Not Updating

by Kieran Dang

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<div id="ubc-graph" />

CSS

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

JavaScript

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

        var ndx = crossfilter(data),
            countryDimension = ndx.dimension(function (d) {
                return d.country;
            }),
            countryGroup = countryDimension.group().reduceSum(function (d) {
                return d.users;
            });

        chart.width(500)
            .height(400)
            .dimension(countryDimension)
            .group(countryGroup);

        dc.renderAll();

        function AddXAxis(chartToUpdate, displayText) {
            chartToUpdate.svg()
                .append("text")
                .attr("class", "x-axis-label")
                .attr("text-anchor", "middle")
                .attr("x", chartToUpdate.width() / 2)
                .attr("y", chartToUpdate.height())
                .text(displayText);
        }
        AddXAxis(chart, "Number of Users");
    },
    initData: function () {
        var data = [];

        for (var i = 0; i < 100; i++) {
            var country = countries[Math.floor((Math.random() * countries.length))];
            var userCount = Math.floor(Math.random() * 100);
            data.push({
                country: country,
                users: userCount
            });
        }
        chartExample.initChart(data);
    }
};

chartExample.initData();