LineChart Fiddle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.31/dc.js"></script>
<div id= "chart"></div>

JavaScript

// Source: https://gist.github.com/xhinking/9341806
function print_filter(filter) {
    var f=eval(filter);
    if (typeof(f.length) != "undefined") {}else{}
    if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
    if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
    console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
}


var data = [
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-07-10T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-07-15T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-06-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-06-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-05-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-07-17T16:14:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-05-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-12-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];

data.forEach(function(d) {
  var tempDate = new Date(d.date);
  d.date = tempDate;
  d.newDate = new Date (d.date.toDateString());
});

var facts = crossfilter(data);

var dateDimension = facts.dimension(function (d) {return d3.time.month(d.newDate); });
var dateGroup = dateDimension.group().reduce(
        function (p, v) {
            p.total += v.total ;
            return p;
        },
        function (p, v) {
            p.total -= v.total ;
            return p;
        },
        function () {
            return {total: 0};
        }
   ...