[dc.js] line chart

check colour is set properly after update (line AND dots)

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<svg id="line1"></svg>
<svg id="line2"></svg>
<svg id="line3"></svg>

CSS

svg {
  height: 280px;
  width: 500px;
}

.greendot {
  stroke: green !important;
  fill: green !important;
  fill-opacity: 1 !important;
}

.reddot {
  stroke: red !important;
  fill: red !important;
  fill-opacity: 1 !important;
}

JavaScript

clearconsole();
var chartWidth = 500;
var myCSV = [{
  "shift": "1",
  "date": "01/01/2016/08/00/00",
  "car": "178",
  "truck": "125",
  "bike": "317",
  "moto": "237"
}, {
  "shift": "2",
  "date": "01/01/2016/17/00/00",
  "car": "125",
  "truck": "189",
  "bike": "125",
  "moto": "273"
}, {
  "shift": "3",
  "date": "02/01/2016/08/00/00",
  "car": "140",
  "truck": "219",
  "bike": "328",
  "moto": "1252"
}, {
  "shift": "4",
  "date": "02/01/2016/17/00/00",
  "car": "222",
  "truck": "290",
  "bike": "432",
  "moto": "378"
}, {
  "shift": "5",
  "date": "03/01/2016/08/00/00",
  "car": "200",
  "truck": "250",
  "bike": "420",
  "moto": "319"
}, {
  "shift": "6",
  "date": "03/01/2016/17/00/00",
  "car": "230",
  "truck": "220",
  "bike": "310",
  "moto": "413"
}, {
  "shift": "7",
  "date": "04/01/2016/08/00/00",
  "car": "155",
  "truck": "177",
  "bike": "377",
  "moto": "180"
}, {
  "shift": "8",
  "date": "04/01/2016/17/00/00",
  "car": "179",
  "truck": "203",
  "bike": "405",
  "moto": "222"
}, {
  "shift": "9",
  "date": "05/01/2016/08/00/00",
  "car": "208",
  "truck": "185",
  "bike": "360",
  "moto": "195"
}, {
  "shift": "10",
  "date": "05/01/2016/17/00/00",
  "car": "150",
  "truck": "290",
  "bike": "315",
  "moto": "280"
}, {
  "shift": "11",
  "date": "06/01/2016/08/00/00",
  "car": "200",
  "truck": "220",
  "bike": "350",
  "moto": "205"
}, {
  "shift": "12",
  "date": "06/01/2016/17/00/00",
  "car": "230",
  "truck": "170",
  "bike": "390",
  "moto": "400"
}, ];
console.log('Click on a datapoint to begin ');

lc1 = dc.lineChart("#line1");
lc2 = dc.lineChart("#line2");
lc3 = dc.lineChart("#line3");

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

myCSV.forEach(function(d) {
  d.date = dateFormat.parse(d.date);
});

myCSV.forEach(function(d) {
  d['car'] = +d['car'];
  d['bike'] = +d['bike'];
  d['moto'] = +d['moto'];
});

//console.log(myCSV);

var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function(d) {
  return...