Highstocks Date not displaying from CSV - highcharts

Question

I am building a chart using highstocks. The date value on the x-axis is not displaying the correct date and starts in 1970. Looking at other post I understand that it needs to be formatted in milliseconds (since 1, January 1970). So I have done this in the CSV file and verfied them on http://www.epochconverter.com/ but still high charts is not displaying the correct date/times. I also tried changing the x-axis type to 'datetime' but still not showing.
I understand one solution is to set a pointStart and pointInterval which does work but the issue I have with this solution is I pull the data daily and append it to the CSV. I worry if, for whatever reason, my scripts to pull the data does not run one day then completes the next it would display the incorrect date for the data.
Below is my HTML code, CSV file, and JS script format and the chart that is being displayed. I would appricate any help in how I can get the dates to display as mm/dd/yyyy.
CSV File:
Date,1457395200000,1457481600000,1457568000000,1457654400000,1457740800000,1457827200000,1457913600000,1458000000000,1458086400000
AUSTX,3862.94,4465.15,4247.64,3875.18,3263.06,3020.23,3309.66,3714.37,1573.27
CLBOH,2331,2662.17,2708.84,2375.02,1843.5,1812.71,2129.4,2273.38,918.63
GUID,2672.38,3164.67,2967.69,3141.39,2771.71,2469.85,2637.58,2792.44,1471.74
NYCNY,6627.41,7575.63,7383.43,6791.21,6339.03,6710.39,6302.29,6829.12,3251.16
ORNCA,11455.43,13908.57,13009.89,13008.68,11133,11028.88,11151.15,13015.48,7460.78
PKVCO,758.45,1242.89,769.35,770.14,745.31,650.31,696.03,726.53,414.16
RADNC,4374.73,5052.56,4889.06,4345.06,3884.03,3466.78,3632.1,3890.75,1142.66
SYRNY,2228.03,2419.88,2426.9,2202.09,1892.67,1948.18,2061.56,2334.07,934.85
$(document).ready(function() {
var options = {
chart: {
renderTo: 'content2',
defaultSeriesType: 'spline',
zoomType: 'x'
},
title: {
text: 'Usage(GiB) by Region',
align: 'center'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
year: '%m/%d/%Y',
},
categories: [],
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
title: {
text: 'Usage(GiB)',
x: 5
},
labels: {
align: 'left',
x: 5
}
},
legend: {
enabled: true,
align: 'right',
// x: -400,
verticalAlign: 'middle',
y: -5,
floating: false,
backgroundColor: 'rgba(35, 35, 75, 1)', //(Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'dark-blue',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
width: 140,
itemWidth: 140,
itemStyle: {
fontSize: '10px'
}
},
tooltip: {
// formatter: function() {
// return '<b>'+ this.x +'</b><br/>'+
// this.series.name +': '+ this.y +'<br/>'; //+
// 'Total: '+ this.point.stackTotal;
// }
},
plotOptions: {
series: {
// pointStart: Date.UTC(2016, 2, 3),
// pointInterval: 24 * 3600 * 1000, //one day`
marker: {
enabled: true,
radius: 4
},
states: {
hover: {
enabled: true,
lineWidth: 4
}
}//,
//events: {
// legendItemClick: function(event) {
// if (!this.visible)
// return false;
//
// var seriesIndex = this.index;
// var series = this.chart.series;
//
// for (var i = 0; i < series.length; i++)
// {
// if (series[i].index != seriesIndex)
// {
//
// series[i].visible ? series[i].hide() : series[i].show();
// }
// }
//
// return false;
// }
//}
},
column: {
// stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
exporting: {
//url: 'http://ubppapp01:8085/highcharts-export-web/',
buttons: {
exportButton: {
menuItems: [
{
text: 'Export to PNG',
onclick: function() {
this.exportChart();
}
}, {
text: 'Export Data',
onclick: function() {
location.href = file2
}
},
null,
null
]
}
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: 0
}
},
navigator: {
enabled: false
},
rangeSelector:{
buttons:[{
type: 'day',
count: 14,
text: '14d'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'All'
}],
selected: 0
},
scrollbar: {
enabled: false
},
series: []
};
$.get(file2, function(data) {
// Split the lines
var lines = data.split('\r');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.StockChart(options);
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dashboard Init</title>
<script type="text/javascript" src="resources/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="resources/lib/highstock.js"></script>
<script type="text/javascript" src="resources/lib/modules/exporting.js"></script>
<script type="text/javascript" src="resources/lib/highcharts-scalable-yaxis-master/scalable-yaxis.js"></script>
<script type="text/javascript" src="resources/lib/themes/dark-blue.js"></script>
<!--[if IE]>
<script type="text/javascript" src="./js/excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript">
var file2="resources/csv/wifi_usage_by_region_t2.csv"
</script>
<script SRC="resources/js/usage_by_region.js">
</script>
</head>
<body bgcolor="silver">
<br>
<p align="center"><big>Home</big>
<hr>
<div id="content2" style="width: 85%; height: 350px; margin: 0 auto"></div>
<br>
</body>
</html>
Click here to see the Chart that is currently generated