No Line Displayed In Line-Chart

34 views

Skip to first unread message

Dani2016

unread,

Aug 23, 2016, 2:19:38 PM8/23/16

to dc-js user group

Hi all,

Need to display line in a line-chart , with the ability to move the tiles, to see a max bitrate value line, to see labels and axis pointers on hover, grouped with a table and time Slider.Y dimension needs to display "bitrate total" or "bitrate Avg" (as defined in code). X dimension needs to display 15 min interval in scope of weeks.

I can upload my data into a table but not into the line graph. I can see points on the graph using .renderDataPoints() but no lines.

I checked the data - could not find any null/NaN values being returned, not using any old version of colors.

I put here my code which includes year, month, week, day, some with 15 min interval, some with moving tiles.

The code also can be found in https://jsfiddle.net/dani2011/bu2ag0f7/8/. Didn't know how to upload there my csv so nothing is being displayed there at the moment.

Any help would be greatly appreciated.

JAVASCRIPT:

'use strict';

// chart objects

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');

// 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 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();

});

}

var min15 = n_minutes_interval(15);

//### Load data

d3.csv('CHANNEL_CLUSTER_BITRATE_takeThis.csv', function (data) {

var minClusterId = d3.min(data, function (d) { return +d["CLUSTER_ID"]; });

var cluster1Data = data.filter(function (d) { return [+d["CLUSTER_ID"]] == +minClusterId; });

// Format CSV data

var dateFormat = d3.time.format('%Y/%m/%d/%H:%M');

var dateAndTime2 = d3.time.format.utc("%Y-%m-%d%H:%M");

var numberFormat = d3.format('.2');

data.forEach(function (d) {

d.bitdate = new Date(d.DATETIME); //d.bitdate = dateFormat.parse(d.DATETIME);//null

d.year = d3.time.year(d.bitdate).getFullYear();

d.month = d3.time.month(d.bitdate).getMonth(); // d3.time.month(d.bitdate);

d.week = d3.time.week(d.bitdate);

d.day = d3.time.day(d.bitdate);

d.hour = d3.time.hour(d.bitdate);

d.minute = d3.time.minute(d.bitdate);

d.CHANNEL_ID = d.CHANNEL_ID;

d.BITRATE = +d.BITRATE; //d.BITRATE = d.BITRATE.match(/\d+/);

});

//### Crossfilter Dimensions

var crossFilteredData = crossfilter(data);

var all = crossFilteredData.groupAll();

// Dimension by full date

var dateDimension = crossFilteredData.dimension(function (d) {

return d.bitdate;

});

// Dimension by year

var yearDim = crossFilteredData.dimension(function (d) {

return d.year;

});

// Dimension by month

var monthDim = crossFilteredData.dimension(function (d) {

return d.month;

});

//Dimendion by week

var weekDim = crossFilteredData.dimension(function (d) {

return d.week;

});

//Dimendion by day

var dayDim = crossFilteredData.dimension(function (d) {

return d.day;

});

//### Crossfiltered Groups

// Group by total bitrate within full date

var fulldateBitrateGroup = dateDimension.group().reduceSum(function (d) {

return d.BITRATE;

});

//Group by total bitrate within year

var yearBitrateGroup = yearDim.group().reduceSum(function (d) {

return d.BITRATE;

});

// Group by total bitrate within month

var montlyBitrateGroup = monthDim.group().reduceSum(function (d) {

return d.BITRATE;

});

//Group by total bitrate within 15 min interval per month

var minIntervalMonthBitrateGroup = monthDim.group(min15).reduceSum(function (d) {

return d.BITRATE;

});

//Group by total bitrate within 15 min interval per week

var minIntervalWeekBitrateGroup = weekDim.group(min15).reduceSum(function (d) {

return d.BITRATE

});

//Group bitrate per year-with running tallies

var bitrateAvgByYearGroup = yearDim.group().reduce(

/* callback for added data */

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 removed data */

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 {

bitrate: 0,

total: 0,

avg: 0

};

}

);

//Group bitrate per month - Maintain running tallies by month as filters are applied or removed

var bitrateAvgByMonthGroup = monthDim.group().reduce(

/* callback for added data */

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 removed data */

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 {

bitrate: 0,

total: 0,

avg: 0

};

}

);

//Group bitrate per month, 15 minInterval - maintain running tallies

var bitrateMonthMinIntervalGroup = monthDim.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 {

bitrate: 0,

total: 0,

avg: 0

};

}

);

//Group bitrate per week, 15 minInterval - maintain running tallies

var bitrateWeekMinIntervalGroupMove = weekDim.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 {

bitrate: 0,

total: 0,

avg: 0

};

}

);

var minDate = yearDim.bottom(1)[0].DATETIME;

var maxDate = yearDim.top(1)[0].DATETIME;

//###Graphs

bitChart /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */

.dimension(weekDim) //.dimension(min15)

.xUnits(d3.time.week) //.xUnits(min15.range)

.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)

// Add the base layer of the stack with group. The second parameter specifies a series name for use in the legend.

.group(bitrateWeekMinIntervalGroupMove, 'Weekly Bitrate Total')

// The `.valueAccessor` is used for the base layer

.valueAccessor(function (d) {

return d.value.avg;

})

// Stack additional layers with `.stack`. The first paramenter is a new group.The second parameter is the series name. The third is a value accessor.

.stack(minIntervalWeekBitrateGroup, 'Weekly Bitrate Average', function (d) {

return d.value;

})

.x(d3.time.scale().domain([new Date(2016, 1, 1), new Date(2016, 11, 31)]))

.elasticY(true)

//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".

.rangeChart(timeSlider)

.width(990)

.height(200)

.transitionDuration(1000)

.margins({ top: 30, right: 50, bottom: 25, left: 50, padding: 1 })

.mouseZoomable(true)

.brushOn(false)

.renderArea(false)

.renderHorizontalGridLines(false)

.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))

.renderDataPoints({ radius: 20, fillOpacity: 0.8, strokeOpacity: 0.8 })

//Render max bitrate horizontal line copied from bar-extra-line.html

.on('renderlet', function(chart) {

var extra_data = [{x: chart.x().range()[0], y: chart.y()(10)},

{x: chart.x().range()[1], y: chart.y()(70)}];

var line = d3.svg.line()

.x(function(d) { return d.x; })

.y(function(d) { return 15; })

.interpolate('linear');

var path = chart.select('g.chart-body').selectAll('path.extra').data([extra_data]);

path.enter().append('path').attr('class', 'extra').attr('stroke', 'red');

path.attr('d', line);

})

// .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' + numberFormat(value)

})

bitChart.render();

//#### Range Chart

// Since this bar chart is specified as "range chart" for the area chart, its brush extent

// will always match the zoom of the area chart.

timeSlider

.dimension(weekDim)// .dimension(min15)

.group(minIntervalWeekBitrateGroup)

.x(d3.time.scale().domain([new Date(2016, 1, 1), new Date(2016, 11, 31)]))

.round(dc.round.floor) //(d3.time.month.round)

.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);

//#### Data Count dateformat.parse(d.time);

// Create a data count widget and use the given css selector as anchor. You can also specify

// an optional chart group for this chart to be scoped within. When a chart belongs

// to a specific group then any interaction with such chart will only trigger redraw

// on other charts within the same chart group.

// <br>API: [Data Count Widget](https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#data-count-widget)

//```html

//<div class='dc-data-count'>

// <span class='filter-count'></span>

// selected out of <span class='total-count'></span> records.

//</div>

//```

bitCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */

.dimension(crossFilteredData)

.group(all)

.html({

some: '<strong>%filter-count</strong> 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)

// 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; })

// (_optional_) max number of records to be shown, `default = 25`

.size(15)

.columns([

'DATETIME',

'CHANNEL_ID',

'BITRATE'

//{

// // Specify a custom format for column 'something' by using a label with a function.

// something: 'something',

// format: function (d) {

// return numberFormat(d.close - d.open);

// }

//}

])

// (_optional_) sort using the given field, `default = function(d){return d;}`

//.sortBy(function (d) {

// return d.dd;

//})

//// (_optional_) sort order, `default = d3.ascending`

//.order(d3.ascending)

// (_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();

// Or you can render charts belonging to a specific chart group

dc.renderAll('group');

// Once rendered you can call `.redrawAll()` to update charts incrementally when the data

// changes, without re-rendering everything

dc.redrawAll();

// Or you can choose to redraw only those charts associated with a specific chart group

dc.redrawAll('group');

//});

//#### 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 */

});

//function drawLine(layersEnter, layers) {

// var line = d3.svg.line()

// .defined(function (d) { if (d.y !== null) { return d.y; } }) //add this line in the existing code ..........

// .x(function (d) {

// return _chart.x()(d.x);

// })

// .y(function (d) {

// return _chart.y()(d.y + d.y0);

// })

//}

HTML:

<!DOCTYPE html>

<head>

<style>

#bitrate-timeSlider-chart g.y {

display: none;

}

#logo {

margin-right: 2em;

margin-top: 2em;

display: none;

}

</style>

</head>

<body>

<h2>Bitrate Analysis</h2>

<span class="reset" style="display: none;">Time Range: <span class="filter"></span></span>

<a class="reset" href="javascript:bitChart.filterAll();timeSlider.filterAll();dc.redrawAll();"

style="display: none;">Reset</a>

</div>

</div>

<p class="muted pull-right" style="margin-right: 15px;">Select a time range to zoom in</p>

</div>

<strong>Bitrate Chart</strong>

<span class="reset" style="display: none;">Range: <span class="filter"></span></span>

<a class="reset" href="javascript:bitChart.filterAll();timeSlider.filterAll();dc.redrawAll();"

style="display: none;">Reset</a>

</div>

<div>

<span class="filter-count"></span> selected out of <span class="total-count"></span> Records | <a

href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>

</div>

</table>

</div>

<!--<a href="https://github.com/dc-js/dc.js"><img style="position: absolute; top: 0; right: 0; border: 0;"

src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"

alt="Fork me on GitHub"></a>-->

</div>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-33628816-1']);

_gaq.push(['_trackPageview']);

(function () {

var ga = document.createElement('script');

ga.type = 'text/javascript';

ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>

CSV:

CLUSTER_ID,CLUSTER_DESC,CHANNEL_ID,CHANNEL_CODE,CHANNEL_DESC, DATETIME, BITRATE

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:00,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:05,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:10,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:15,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:20,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:25,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:30,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:35,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:40,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:45,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:50,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 0:55,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:00,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:05,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:10,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:15,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:20,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:25,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:30,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:35,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:40,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:45,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:50,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 1:55,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:00,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:05,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:10,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:15,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:20,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:25,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:30,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:35,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:40,30

1,Cluster #1,1,Cl:1 Ch:1,Channel #1,2016-06-14 2:45,30

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:25,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:30,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:35,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:40,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:45,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:50,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 22:55,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:00,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:05,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:10,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:15,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:20,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:25,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:30,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:35,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:40,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:45,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:50,21

2,Cluster #2,10,Cl:2 Ch:10,Channel #10,2016-06-18 23:55,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:00,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:05,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:10,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:15,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:20,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:25,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:30,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:35,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:40,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:45,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:50,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 0:55,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:00,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:05,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:10,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:15,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:20,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:25,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:30,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:35,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:40,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:45,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:50,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 1:55,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:00,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:05,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:10,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:15,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:20,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:25,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:30,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:35,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:40,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:45,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:50,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 2:55,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:00,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:05,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:10,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:15,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:20,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:25,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:30,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:35,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:40,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:45,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:50,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 3:55,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:00,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:05,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:10,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:15,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:20,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:25,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:30,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:35,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:40,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:45,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:50,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 4:55,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:00,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:05,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:10,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:15,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:20,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:25,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:30,21

3,Cluster #3,1,Cl:3 Ch:1,Channel #1,2016-06-14 5:35,21

Dani2016

unread,

Aug 25, 2016, 1:31:06 AM8/25/16

to dc-js user group

Please find the answer of Gordon here: http://stackoverflow.com/questions/39109107/dc-js-line-chart-no-line-being-displayed .