Created at the time jsFiddle which worked fine https://jsfiddle.net/dani2011/jydbqjgm/9/. It seems to be corrupted due to a problem with the resource file https://dc-js.github.io/dc.js/js/colorbrewer.js giving a 404 error. Replaced the corrupted version with https://cdn.jsdelivr.net/npm/[email protected]/colorbrewer.js. In addition, updated all the other resource files with recent versions from https://cdnjs.com/libraries/. Furthermore, referred to https since the fiddle itself is hosted on https. Here is some code:
'use strict';
//#### Chart objects
var bitChart = dc.compositeChart("#bitrate-move-chart");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var bitChart2 = dc.compositeChart("#bitrate-move-chart2");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var timeSlider = dc.barChart('#bitrate-timeSlider-chart');
var bitCount = dc.dataCount('.dc-data-count');
var bitrateTable = dc.dataTable('.dc-data-table');
//#### Creating dynamic Y axis with min/max ticks' values depending on min/max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
function nonzero_min(chart) {
dc.override(chart, 'yAxisMin', function () {
var min = d3.min(chart.data(), function (layer) {
return d3.min(layer.values, function (p) {
return p.y + p.y0;
});
});
return dc.utils.subtract(min, chart.yAxisPadding());
});
return chart;
}
//#### 15 Min Interval - copied from https://github.com/mbostock/d3/blob/master/src/time/interval.js
var d3_date = Date;
function d3_time_interval(local, step, number) {
function round(date) {
var d0 = local(date), d1 = offset(d0, 1);
return date - d0 < d1 - date ? d0 : d1;
}
function ceil(date) {
step(date = local(new d3_date(date - 1)), 1);
return date;
}
function offset(date, k) {
step(date = new d3_date(+date), k);
return date;
}
function range(t0, t1, dt) {
var time = ceil(t0), times = [];
if (dt > 1) {
while (time < t1) {
if (!(number(time) % dt)) times.push(new Date(+time));
step(time, 1);
}
} else {
while (time < t1) times.push(new Date(+time)), step(time, 1);
}
return times;
}
function range_utc(t0, t1, dt) {
try {
d3_date = d3_date_utc;
var utc = new d3_date_utc();
utc._ = t0;
return range(utc, t1, dt);
} finally {
d3_date = Date;
}
}
local.floor = local;
local.round = round;
local.ceil = ceil;
local.offset = offset;
local.range = range;
var utc = local.utc = d3_time_interval_utc(local);
utc.floor = utc;
utc.round = d3_time_interval_utc(round);
utc.ceil = d3_time_interval_utc(ceil);
utc.offset = d3_time_interval_utc(offset);
utc.range = range_utc;
return local;
}
function d3_time_interval_utc(method) {
return function (date, k) {
try {
d3_date = d3_date_utc;
var utc = new d3_date_utc();
utc._ = date;
return method(utc, k)._;
} finally {
d3_date = Date;
}
};
}
//#### Generalization of d3.time.minute copied from- https://github.com/mbostock/d3/blob/master/src/time/minute.js
function n_minutes_interval(nmins) {
var denom = 6e4 * nmins;
return d3_time_interval(function (date) {
return new d3_date(Math.floor(date / denom) * denom);
}, function (date, offset) {
date.setTime(date.getTime() + Math.floor(offset) * denom); // DST breaks setMinutes
}, function (date) {
return date.getMinutes();
});
}
//bitChart
var min15 = n_minutes_interval(15);
//bitChart2
var min15_2 = n_minutes_interval(15);
//timeslider
var min15_3 = n_minutes_interval(15);
//### Load data
var data = d3.csv.parse(d3.select("pre#anotherdata").text());
//d3.csv('CHANNEL_CLUSTER_BITRATE_takeThis.csv', function (data) {
// Format CSV data
var dateFormat = d3.time.format('%Y/%m/%d/%H:%M');
var numberFormat = d3.format('.2');
data.forEach(function (d) {
d.bitdate = new Date(d.DATETIME); //d.DATETIME = dateFormat.parse(d.DATETIME);
d.BITRATE = +d.BITRATE.match(/\d+/); //d.BITRATE = +d.BITRATE;
});
//### Crossfilter Dimensions
var crossFilteredData = crossfilter(data);
var all = crossFilteredData.groupAll();
// Dimension by full date
//bitChart
var dateDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//bitChart2
var dateDimension2 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//timeSlider
var dateDimension3 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//dropDown
var filterDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//### Crossfiltered Groups
//timeSlider group
var minIntervalWeekBitrateGroup3 = dateDimension3.group(min15_3).reduceSum(function (d) {
return 10 //+d.BITRATE
});
//bitChart group-Group bitrate per week, 15 minInterval - maintain running tallies
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.BITRATE = +v.BITRATE;
p.total += +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.BITRATE = +v.BITRATE;
p.total -= +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* initialize p */
function () {
return {
count: 0,
bitrate: 0,
total: 0,
avg: 0
};
}
);
//bitChart2 group
var bitrateWeekMinIntervalGroupMove2 = dateDimension2.group(min15_2).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.BITRATE = +v.BITRATE;
p.total += +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.BITRATE = +v.BITRATE;
p.total -= +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* initialize p */
function () {
return {
count: 0,
bitrate: 0,
total: 0,
avg: 0
};
}
);
//### Domain limits
var minDate = dateDimension.bottom(1)[0].DATETIME;// alert(minDate);
var maxDate = dateDimension.top(1)[0].DATETIME;// alert(maxDate);
//domain limits for brush
var start = moment(new Date(minDate));
var end = moment(new Date(maxDate));
var tmp;
//max line
var maxbit = d3.max(data, function (d) { return +d["BITRATE"]; }); //alert(maxbit);
var graphSpan;
function addHours(amountHours) {
graphSpan = amountHours;
timeSlider.replaceFilter(dc.filters.RangedFilter(start, moment(start).add(amountHours, 'hours')));
dc.redrawAll();
}
//dropdown copied from <!--http://jsfiddle.net/gordonwoodhull/ewmrmu83/9/-->
d3.select('#hoursDropDown').on('change', function() {
addHours(this.value);
});
//###Graphs//bitChart
bitChart /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15.range) //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
var left_y = 10, right_y = 70; // use real statistics here!
var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
var line = d3.svg.line()
.x(function (d) { return d.x; })// console.log("d.x " + d.x);
.y(function (d) { return maxbit; })
.interpolate('linear');
var chartBody = chart.select('g.chart-body');
var path = chartBody.selectAll('path.extra').data([extra_data]);
path.enter().append('path').attr({
class: 'extra',
stroke: 'red',
id: 'extra-line'
});
path.attr('d', line);
// Label the max line
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter().append('text')
.attr('text-anchor', 'middle')
.append('textPath').attr({
class: 'extra-label',
'xlink:href': '#extra-line',
startOffset: '50%'
})
.text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
var value = d.value.total ? d.value.total : d.value;
if (isNaN(value)) {
value = 0;
}
// console.log("dateFormat(d.key) " + dateFormat(d.key));
return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
nonzero_min(dc.lineChart(bitChart)
.dimension(min15)
.colors('blue')
.group(bitrateWeekMinIntervalGroupMove, 'Bitrate Total')
.valueAccessor(function (d) {
return d.value.total;
})
// .dashStyle([2,2])
.interpolate('step-after')
.renderArea(false)
.brushOn(false)
.renderDataPoints(false)
.clipPadding(10)),
])
bitChart.render();
//bitChart2
bitChart2 /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15_2.range) //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
var left_y = 10, right_y = 70; // use real statistics here!
var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return maxbit; })
.interpolate('linear');
var chartBody = chart.select('g.chart-body');
var path = chartBody.selectAll('path.extra').data([extra_data]);
path.enter().append('path').attr({
class: 'extra',
stroke: 'red',
id: 'extra-line'
});
path.attr('d', line);
// Label the max line
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter().append('text')
.attr('text-anchor', 'middle')
.append('textPath').attr({
class: 'extra-label',
'xlink:href': '#extra-line',
startOffset: '50%'
})
.text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
var value = d.value.total ? d.value.total : d.value;
if (isNaN(value)) {
value = 0;
}
return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
nonzero_min(dc.lineChart(bitChart2)
.dimension(min15_2)
.colors('blue')
.group(bitrateWeekMinIntervalGroupMove2, 'Bitrate Total')
.valueAccessor(function (d) {
return d.value.total;
})
//.dashStyle([2,2])
.interpolate('step-after')
.renderArea(false)
.brushOn(false)
.renderDataPoints(false)
.clipPadding(10)),
])
bitChart2.render();
//Range Chart - timeSlider
// Since this bar chart is specified as "range chart" for the line chart, its brush extent will always match the zoom of the line chart.
timeSlider
.dimension(dateDimension3)//.dimension(min15)
.group(minIntervalWeekBitrateGroup3)
//.x(d3.time.scale().range([0, brushContainer.select("rect").attr("width")]).domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.x(d3.time.scale().domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.round(dc.round.floor) //(d3.time.month.round)
.xUnits(min15_3.range)//.xUnits(d3.time.week) //.xUnits(d3.time.minute) //.xUnits(d3.time.months)
.width(990) /* dc.barChart('#bitrate-timeSlider-chart', 'chartGroup'); */
.height(40)
.margins({ top: 0, right: 50, bottom: 20, left: 40 })
// .centerBar(true)
.gap(1)
.mouseZoomable(true)
.on('filtered',function (chart){
console.log("filtered");
})
.on('preRedraw',function (chart)
{
console.log("filtered");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('renderlet', function (chart) {
console.log("renderlet myjs");
var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);
var timesliderSVG3 = resizeg.exit().remove();
//////stop brush events
// var brush = d3.svg.brush()
// brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
// brushg.call(brush)
// brushg.on("brushstart", d3.event.stopPropagation()).on("brush", d3.event.stopPropagation()).on("brushend", d3.event.stopPropagation()).on("touchmove.brush", null).on("touchend.brush", d3.event.stopPropagation()).on("mousemove.brush", d3.event.stopPropagation()).on("mouseup.brush", d3.event.stopPropagation());
//disable resize(not working)
// var brush = d3.svg.brush()
//// brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
// var brush1 = brush.on("brush", brushed);
// function brushed() {
// size = extent[1] - extent[0],
// domain = x.domain(),
// x0 = domain[0] ,
// x1 = domain[1] ;
// brush.extent(x0, x1);
// var timesliderSVG4 = brushg.on("brushstart", function () { resizeg.exit().remove() }).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })
// var timesliderSVG6 = resizeg.style("display", "none");
})
.on('pretransition', function (chart) {
console.log("filtered myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('postRender', function (chart) {
console.log("postRender myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('preRender', function (chart) {
console.log("preRender myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('postRedraw', function (chart) {
console.log("postRedraw myjs");
timeSlider.extendBrush = function() {
var extent = timeSlider.brush().extent();
if(graphSpan) {
extent[1] = moment(extent[0]).add(graphSpan, 'hours');
timeSlider.brush().extent(extent);
}
return extent;
}
//////code from http://bl.ocks.org/mbostock/6498000
//var brush = d3.svg.brush()
//brush.on("brush", brushmove);
//brushg.call(brush);
//brushg.selectAll("rect.background")
//.on("mousedown.brush", brushcenter)
//.on("touchstart.brush", brushcenter);
//brushg.call(brush.event);
//function brushmove() {
// var extent = brush.extent();
// return extent[1] - extent[0];
// var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
// // dot.classed("selected", function (d) { return extent[0] <= d && d <= extent[1]; });
//}
//function brushcenter() {
// var self = d3.select(window),
// target = d3.event.target,
// extent = brush.extent(),
// size = extent[1] - extent[0],
// domain = x.domain(),
// x0 = domain[0] + size / 2,
// x1 = domain[1] - size / 2;
// recenter(true);
// brushmove();
// if (d3.event.changedTouches) {
// self.on("touchmove.brush", brushmove).on("touchend.brush", brushend);
// } else {
// self.on("mousemove.brush", brushmove).on("mouseup.brush", brushend);
// }
// function brushmove() {
// d3.event.stopPropagation();
// center = Math.max(x0, Math.min(x1, x.invert(d3.mouse(target)[0])));
// recenter(false);
// }
// function brushend() {
// brushmove();
// self.on(".brush", null);
// }
//}
//function recenter(smooth) {
// if (centering) return; // timer is active and already tweening
// if (!smooth) return void tween(1); // instantaneous jump
// centering = true;
// function tween(alpha) {
// var extent = brush.extent(),
// size = extent[1] - extent[0],
// center1 = center * alpha + (extent[0] + extent[1]) / 2 * (1 - alpha);
// brushg
// .call(brush.extent([center1 - size / 2, center1 + size / 2]))
// .call(brush.event);
// return !(centering = Math.abs(center1 - center) > 1e-3);
// }
// d3.timer(function () {
// return tween(alpha);
// });
//}
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('zoomed', function (chart) {
console.log("zoomed myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
//var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
//var chartBrush = timeSlider.select('g.brush');
//var resizeE = chartBrush.select('resize e');//.data([extra_data]);
//resizeE.select("rect").remove();
//resizeE.select("path").remove();
// onbrush();
//function onbrush(chart) {
// //console.log(d3.event)
// //var chartBrush = timeSlider.select('g.brush');
// //var resizeE = chartBrush.select('resize e');//.data([extra_data]);
// //resizeE.select("rect").remove();
// //resizeE.select("path").remove();
// //if (chart.brush().event.type === "brush" && chart.brush().event.mode === "resize") {
// // var currentExtent = brush.extent();
// // console.log("currentExtent: " + currentExtent);
// // var side = (+currentExtent[0] !== +startExtent[0]) ? "left" : "right";
// // console.log(side);
// //}
//}
// var timesliderSVG4 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.handle").data(data[0]).exit().remove();
// var timesliderSVG5 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.background").selectAll("*").data(data[0]).exit().remove();
// var svg6 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").data([{ type: "w" }, { type: "e" }]).selectAll("path").exit().remove();
// var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
// console.log("preRender");
// var brushExtent = chart.brush().extent();
// d3.select("#bitrate-timeSlider-chart").selectAll("g.resize").style("visibility","hidden");
// var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").remove();
// var anotherTimeSliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").data(data[0]).exit().remove();
// var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
// var justRemove = d3.selectAll("g.resize").remove();
// var brushSVG = d3.select("g.brush").selectAll("g.resize").data([extra_data]).exit().remove();
// d3.select("g.parent").selectAll("*").remove();
// timesliderSVG.svg.selectAll("g.resize e").remove();
// timesliderSVG.selectAll(".g.resize e").data([]).exit().remove()
// timesliderSVG.select("svg").select("g").select("g.brush").select("g.resize e").enter().remove("g.resize e");
// console.log("extent " + chart.brush().extent());
// var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
//chart.brush().on("brush", console.log('brush'))
//chart.brush().on("brushstart", console.log('brushedstart'))
//chart.brush().on("brushend", console.log('brushedend'))
// console.log("brushwidth " + brushwidth)
// console.log("extent " + chart.brush().extent());
// var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
//console.log("width " + brushwidth)
// chart.brush().selectAll("resize").select("rect").remove();
// chart.select(g.brush);
//.handleSize(0);
// svg.append("g")
// .attr("class", "brush")
// .selectAll("rect")
// .attr("visibility", hidden)
// .attr("height", 0)
// .selectAll("path")
// .attr("visibility", hidden)
// .attr("height", 0);
// onbrush();
//var chartBrush = chart.select('g.brush');
//var resizeE = chartBrush.select('resize e');//.data([extra_data]);
//resizeE.select("rect").remove();
//resizeE.select("path").remove();
// alert(resizeE.id);
//resizeArea.enter().append('resizeArea').attr({
// width: '0px',
// height: '0px',
//});
//resizeArea.attr('width', 0);
//resizeArea.attr('height', 0);
// resizeE.remove();
// d3.select("g.brush").call(brush.extent([0, 0]))
// d3.selectAll("rect.bar").style("opacity", "0.4");
// d3.select(this).selectAll('g.resize').remove();
// var slider = context.append("g")
//.attr("class", "x brush")
//.call(brush);
// Remove the resize control
// chart.svg().selectAll('g.resize').remove();
// var res = g.selectAll("g.brush g.resize");
//#### Data Count dateformat.parse(d.time);
bitCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
.dimension(crossFilteredData)
.group(all)
.html({
some: '<strong>%filter-count</strong> records selected out of <strong>%total-count</strong> records' +
' | <a href=\'javascript: dc.filterAll(); dc.renderAll();\'>Reset All</a>',
all: ' All records selected. Please click on the graph to apply filters.'
});
//#### Data Table
bitrateTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
.dimension(dateDimension) // .dimension(dateDimension)
// Data table does not use crossfilter group but rather a closure as a grouping function
.group(function (d) {
var format = d3.format('02d');
return d.bitdate.getFullYear() + '/' + format((d.bitdate.getMonth() + 1));
})
.sortBy(function (d) { return d.bitdate; })
.size(13)// (_optional_) max number of records to be shown, `default = 25`
.columns([
'DATETIME',
'CHANNEL_ID',
'BITRATE'
])
// (_optional_) custom renderlet to post-process chart using [D3](http://d3js.org)
.on('renderlet', function (table) {
table.selectAll('.dc-table-group').classed('info', true);
});
//#### Rendering
//Render all charts on the page
dc.renderAll();
//#### Versions
//Determine the current version of dc with `dc.version`
d3.selectAll('#version').text(dc.version);
// Determine latest stable version in the repo via Github API
d3.json('https://api.github.com/repos/dc-js/dc.js/releases/latest', function (error, latestRelease) {
/*jshint camelcase: false */
d3.selectAll('#latest').text(latestRelease.tag_name); /* jscs:disable */
});
//});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>Any ideas?
Thanks,
Dani
I remember this fiddle!
Sorry about this, back then I didn't realize what a bad idea it was to source dc.js from github.io. Now that dc has advanced to version 3, which is only compatible with d3 v4 and later, all of these old fiddles have broken. I try to fix old answers whenever I encounter them.
The solution here is pretty easy, just explicitly source dc@2 instead of using github.io. Replacing the resources for dc with
https://unpkg.com/dc@2/dc.js
https://unpkg.com/dc@2/dc.css
it looks like everything is working.
Going forward, I am writing all new fiddles this way.