We face the following problems how to fix that like showing in sample snapshot?

1. How to set date string for categoryX?
2. Why the x axis does not display properly?
3. Why the time of currData is different from the time of currData1, but the chart looks the same?

$(function () {

var currData = [{
Date: "\/Date(1487920800000+0800)\/",
Value: 1
}, {
Date: "\/Date(1487921400000+0800)\/",
Value: 2
}, {
Date: "\/Date(1487922000000+0800)\/",
Value: 3
}, {
Date: "\/Date(1487922600000+0800)\/",
Value: 4
}, {
Date: "\/Date(1487923200000+0800)\/",
Value: 5
}];

var currData1 = [ {
Date: "\/Date(1487922600000+0800)\/",
Value: 6
}, {
Date: "\/Date(1487923200000+0800)\/",
Value: 7
}, {
Date: "\/Date(1487923800000+0800)\/",
Value: 1
}];

$("#container").igDataChart({
width: "500px",
height: "500px",
dataSource: currData,
axes: [{
name: "xAxis",
type: "categoryX",
formatLabel: function (item) {
var val = new Date(parseInt(item.Date.substr(6)));
ret = val.getHours();
ret += ":";
ret += val.getMinutes();
ret += ":";
ret += val.getSeconds();
return ret;
},
label: "Date",
labelAngle: 45,
labelExtent: 50,
markerType: "circle",
interval: 600
},{
name: "xAxis1",
type: "categoryX",
formatLabel: function (item) {
var val = new Date(parseInt(item.Date.substr(6)));
ret = val.getHours();
ret += ":";
ret += val.getMinutes();
ret += ":";
ret += val.getSeconds();
return ret;
},
label: "Date",
labelVisibility: 'collapsed',
markerType: "circle",
interval: 600
},
{
name: "yAxis",
type: "numericY"
}],
series: [{
name: "series1",
title: "Test Series1",
type: "line",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "series2",
title: "Test Series2",
type: "line",
dataSource: currData1,
xAxis: "xAxis1",
yAxis: "yAxis",
valueMemberPath: "Value"
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
overviewPlusDetailPaneVisibility: "visible"
});

});