DC Line Chert Time Axis Format

http://stackoverflow.com/questions/27799828/dc-js-wrong-time-format

HTML

<script src="http://tvinci.github.io/webs/js/crossfilter.js"></script>
<script src="http://tvinci.github.io/webs/js/d3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<body><div id="chart"></div></body>

JavaScript

var hitslineChart = dc.lineChart("#chart"); 

var data = [
    { "quarter": "Q1", "hits": 10410, "receive_time": "18/04/2017 16:00" },
    { "quarter": "Q1", "hits": 1060, "receive_time": "18/04/2017 16:15" },
    { "quarter": "Q1", "hits": 10851, "receive_time": "18/04/2017 16:30" }
];
        
var ndx = crossfilter(data); 

var timeFormat = d3.time.format('%d/%m/%Y %H:%M');

data.forEach(function(d) {
    d.date = timeFormat.parse(d.receive_time);
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.hits;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
            
hitslineChart.width(500).height(200)
	.dimension(dateDim)
	.group(hits)
  .brushOn(true)
  .mouseZoomable(true)
    .renderArea(true)
    .x(d3.time.scale().domain([timeFormat.parse('15:00'),timeFormat.parse('20:00')]))
    .elasticX(true);

hitslineChart.xAxis().tickFormat(timeFormat);

dc.renderAll();