time-series breakdown

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js multi-line chart attempt</title>

<div class="container">
    <h1>Multi-Line Chart in dc.js</h1>

<div class="row">
        <div id="data-count" class="span12">
            Showing <span class="filter-count"/></span> of <span class="total-count"></span> data points
            | <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
        </div>
    </div>

<div class="row">
        <div id="time-chart" class="dc-chart span6">
            <strong>Time</strong>
            <small class="text-muted">
            <time id="date-start" datetime="2012-08-26 20:09-0700">8:09pm on August 26th, 2012</time> &ndash;
            <time id="date-end" datetime="2012-08-26 20:09-0700">8:09pm on August 26th, 2012</time>
            </small>
            <a class="reset" href="javascript:time_chart.filterAll(); dc.redrawAll();" style="display: none;">
                reset
            </a>

<div id="temp-chart" class="dc-chart span6">
            <strong>Temperature</strong>
            <a class="reset" href="javascript:temp_chart.filterAll(); dc.redrawAll();" style="display: none;">
                reset
            </a>

</div>

</div>

var coerce_row = function(d){
    return {
        time: new Date(+d[0] * 1000.0),
        field: d[1],
        temperature: +d[2],
        count: +d[3],
    };
};
var data = [
 //['time', 'text', 'temperature', 'count'],
 ['1379952000', 'field_1', 91, 56],
 ['1379952000', 'field_2', 50, 20],
 ['1379952000', 'field_3', 88, 24],
 ['1379952000', 'field_4', 50, 37],
 ['1379953200', 'field_1', 97, 58],
 ['1379953200', 'field_2', 84, 86],
 ['1379953200', 'field_3', 85, 62],
 ['1379953200', 'field_4', 88, 73],
 ['1379954400', 'field_1', 89, 38],
 ['1379954400', 'field_2', 52, 26],
 ['1379954400', 'field_3', 98, 66],
 ['1379954400', 'field_4', 96, 38],
 ['1379955600', 'field_1', 95, 98],
 ['1379955600', 'field_2', 88, 12],
 ['1379955600', 'field_3', 57, 95],
 ['1379955600', 'field_4', 94, 80],
 ['1379956800', 'field_1', 77, 51],
 ['1379956800', 'field_2', 50, 19],
 ['1379956800', 'field_3', 58, 23],
 ['1379956800', 'field_4', 99, 29],
 ['1379958000', 'field_1', 75, 28],
 ['1379958000', 'field_2', 57, 16],
 ['1379958000', 'field_3', 65, 53],
 ['1379958000', 'field_4', 84, 37],
 ['1379959200', 'field_1', 98, 72],
 ['1379959200', 'field_2', 71, 63],
 ['1379959200', 'field_3', 50, 68],
 ['1379959200', 'field_4', 51, 72],
 ['1379960400', 'field_1', 91, 64],
 ['1379960400', 'field_2', 64, 77],
 ['1379960400', 'field_3', 89, 13],
 ['1379960400', 'field_4', 62, 85],
 ['1379961600', 'field_1', 82, 69],
 ['1379961600', 'field_2', 53, 70],
 ['1379961600', 'field_3', 74, 48],
 ['1379961600', 'field_4', 66, 29]
 ];

var dataset = data.map(coerce_row);

time_fields.all().forEach(function(d){
    var key = JSON.parse(d.key);
    d.key = new Date(key[0]);
    d.field = key[1];
});

d3.select("#date-start")
    .attr("datetime", extent[0])
    .text(date_format(extent[0]));
d3.select("#date-end")
    .attr("datetime", extent[1])
    .text(date_format(extent[1]));

dc.dataCount("#data-count")
// Since the number of records (returned by .size()) isn't the same as the number
// of data points we're aggregating, supply a size-like object that returns the
// total number of data points represented.
    .dimension({size: function(){return dataset.reduce(add, 0);}})
    .group(all);

time_chart
    .width(.5 * width)
    .height(400)
    .margins({top: 10, right: 10, bottom: 30, left: 60})
    .dimension(time_field)
    .group(time_fields)
    .elasticY(true)
    .elasticX(true)
    .x(d3.time.scale().domain(extent))
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .brushOn(false)
    .compose([
        // TODO: how to add n lines, one for each value of d.data.field (i.e. field_1 ... field_n)? 
        dc.lineChart(time_chart)
            .title(function(d){ return d.data.field + " ("+ d.data.value + ")";})
    ]);

temp_chart
    .width(.5 * width)
    .height(400)
    .margins({top: 10, right: 10, bottom:30, left:60})
    .dimension(temperature)
    .group(temperatures)
    .x(d3.scale.linear().domain([0, 100]))
    .elasticY(true)
    .renderHorizontalGridLines(true);

dc.renderAll();

</script>
</body>
</html>

Modified http://nickqizhu.github.io/dc.js/js/d3.js to a secure url

Modified http://nickqizhu.github.io/dc.js/js/crossfilter.js to a secure url

Modified http://nickqizhu.github.io/dc.js/js/dc.js to a secure url

https://nickqizhu.github.io/dc.js/js/d3.js

https://nickqizhu.github.io/dc.js/js/crossfilter.js

https://nickqizhu.github.io/dc.js/js/dc.js