D3 Examples - dc.js demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dimensional Charting</title>
    <link rel="stylesheet" type="text/css" href="dc.css"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript" src="https://nickqizhu.github.io/d3-cookbook/lib/d3.js"></script>
    <script type="text/javascript" src="https://nickqizhu.github.io/d3-cookbook/lib/crossfilter.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js"></script>
</head>
​
<body>
     <div class="dc-data-count">You have 
                    <span>
                        <span class="filter-count"></span>
                        selected out of 
                        <span class="total-count"></span>
                        rows. 
                        <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
                    </div>
​
<div id="area-chart"></div>
​
<div id="donut-chart"></div>
​
<div id="bar-chart"></div>
​
<div id="chart-line-ordersperday"></div>
​
<div style='clear:both;'>
        <table id="dc-data-table">
            <thead>
            <tr class="header">
                <th>Day</th>
                <th>Method</th>
                <th>Restuarant</th>
                <th>Orders</th>
            </tr>
            </thead>
        </table>
</div> 
​
<script type="text/javascript">
    var timeFormat = d3.time.format.iso;
    var parseDate = d3.time.format("%m/%d/%Y").parse;
​
    d3.json('payment.json', function(json){
​
        json.forEach(function(d) {
    d.date = parseDate(d.date);
});
        var data = crossfilter(json);
         var groupdata = data.groupAll();
​
        // var hours = data.dimension(function(d){
        //     return d3.time.hour(timeFormat.parse(d.date));
        // });
        // var totalByHour = hours.group().reduceSum(function(d){
        //                         return d.total;
        //                     });
​
        var types = data.dimension(function(d){return d.type;});
 
        var weekday = data.dimension(function(d){return d.Weekday;});
​
​
​
        var ordersByType = types.group().reduceSum(function(d){
                                return d.Orders;
                            });
​
​
        var ordersByWD = weekday.group().reduceSum(function(d){
                                return d.Orders;
                            });
​
var dateDim = data.dimension(function(d) {return d.date;});
var dateOrders = dateDim.group().reduceSum(function(d) {return d.Orders;}); 
​
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
​
        
        // var quantities = data.dimension(function(d){return d.quantity;});
        // var salesByQuantity = quantities.group();
​
        // dc.lineChart("#area-chart")
        //         .width(500)
        //         .height(250)
        //         .dimension(hours)
        //         .group(totalByHour)
        //         .x(d3.time.scale().domain([timeFormat.parse("2011-11-14T01:17:54Z"), timeFormat.parse("2011-11-14T18:09:52Z")]))
        //         .elasticY(true)
        //         .xUnits(d3.time.hours)
        //         //.renderArea(true)
        //         .xAxis().ticks(5);
​
​
                
 var bar1 = dc.barChart("#bar-chart");
    var pie1 = dc.pieChart("#donut-chart");
var orderslineChart  = dc.lineChart("#chart-line-ordersperday");
​
                bar1
                .width(800)
                .height(250)
                .dimension(weekday)
                .x(d3.scale.ordinal().domain(["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]))
                .xUnits(dc.units.ordinal)
                .group(ordersByWD)
                .y(d3.scale.linear().domain([0, 3200]))
                .margins({top: 20, right: 30, bottom: 50, left: 80})
                .label(function(d) { return d.value})
                ;
                                
                //.centerBar(true)
                ;
​
                 pie1
                .width(250)
                .height(250)
                .radius(125)
                .innerRadius(50)
                .dimension(types)
                .renderTitle(true)
                //.label(function(d) { return d.value})
                .legend(dc.legend().x(0).y(10))
                .group(ordersByType);
​
​
orderslineChart
    .width(1000).height(200)
    .dimension(dateDim)
    .group(dateOrders)
    .x(d3.time.scale().domain([minDate,maxDate])); 
​
​
​
var datatable   = dc.dataTable("#dc-data-table");
datatable
.width(800)
.height(500)
    .dimension(dateDim)
    .group(function(d) { return "List of all orders corresponding to the filters";})
    // dynamic columns creation using an array of closures
    .columns([
        function(d) { return d.date.getDate() + "/" + (d.date.getMonth() + 1) + "/" + d.date.getFullYear(); },
        function(d) {return d.type;},
        function(d) {return d.Restaurant;},
        function(d) {return d.Orders;}
    ])
    .sortBy(function(d){ return d.date; })
.order(d3.ascending);
​
    
dc.dataCount(".dc-data-count")
        .dimension(data)
        .group(groupdata);
​
​
        dc.renderAll();
    });
</script>
​
</body>
​
</html>
    