dc.js demo

<!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 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>

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

dc.dataCount(".dc-data-count")
        .dimension(data)
        .group(groupdata);

dc.renderAll();
    });
</script>

</body>

</html>

Modified http://nickqizhu.github.io/d3-cookbook/lib/d3.js to a secure url

Modified http://nickqizhu.github.io/d3-cookbook/lib/crossfilter.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js to a secure url

https://nickqizhu.github.io/d3-cookbook/lib/d3.js

https://nickqizhu.github.io/d3-cookbook/lib/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js