DC.js - Scatter Plot Not Updating
HTML
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<div id="dc-timeofday-chart" />
JavaScript
var chartExample = {
initChart: function (data) {
data.forEach(function (e) {
var parseDateTime = d3.time.format("%Y-%m-%dT%I:%M:%S.%LZ");
var parseDay = d3.time.format("%Y-%m-%d");
e.datetime = parseDateTime.parse(e.datetime);
e.hour = d3.time.hour(e.datetime);
e.day = d3.time.day(e.datetime);
e.month = d3.time.month(e.datetime);
});
var dateRange = d3.extent(data, function(d){return d.day});
var numberOfDays = Math.floor((dateRange[1] - dateRange[0]) / 86400000) + 1;
var crossfilterData = crossfilter(data);
var timeOfDayChart = dc.lineChart("#dc-timeofday-chart");
var volumeByHour = crossfilterData.dimension(function (d) {
return d.datetime ? (d.datetime.getHours()):null;
});
var volumeByHourGroup = volumeByHour.group().reduce(
function (p, v) {
++p.count;
p.avgCount = p.count / numberOfDays;
return p;
},
function (p, v) {
--p.count;
p.avgCount = p.count / numberOfDays;
return p;
},
function () {
return {
count: 0,
avgCount: 0
};
});
timeOfDayChart.width(350)
.height(225)
.dimension(volumeByHour)
.group(volumeByHourGroup)
.x(d3.scale.linear().domain([0, 24]))
.valueAccessor(function(d){return d.value.avgCount})
.xAxis()
.tickValues([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23])
.tickFormat(function(d)
{
if(d == 0) return "Midnight";
else if(d == 7) return "8am"
else if (d ==11) return "noon";
else if...