/* Analyzing Historical Performance */
document.addEventListener('DOMContentLoaded', function() {
const lineChartUrl = 'https://bfc-dashboard-api.herokuapp.com/line_chart';
Highcharts.getJSON(lineChartUrl, function(data) {
var seriesData = [];
var dates = [];
var options = {
series: [{
name: 'Fund',
data: seriesData,
}],
xAxis: {},
yAxis: {
title: {
text: 'Value',
style: {
fontWeight: 'bold'
}
},
crosshair: true,
labels: {
style: {
color: '#77e8e3'
}
},
gridLineColor: '#777'
}
};
for (var i = 0; i < data.length; i++) {
date = new Date(data[i][0]);
seriesData.push(
data[i][1],
date
);
};
//options.xAxis.categories = dates;
console.log(options);
Highcharts.stockChart('chart-one', options);
});
});<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
<div id="chart-one"></div>The formatting of the data to display in Highcharts is causing difficulty. While the line chart shows the data points, the dates on the xAxis appear as Jan 1, 1970 in a long time stamp. See screenshot
Currently, I am fetching JSON data, converting the date string to a Data object, and pushing the values to a new array called "seriesData" used to populate the points on the chart.
My goal is to have the dates displayed in DD/MM/YYYY format corresponding to their respective data point on the chart. Any suggestions are welcome. Despite similar topics existing, finding a suitable solution to the issue remains challenging.
document.addEventListener('DOMContentLoaded', function () {
const lineChartUrl = 'https://bfc-dashboard-api.herokuapp.com/line_chart';
Highcharts.getJSON(lineChartUrl, function(data) {
var seriesData = [];
var dates = [];
var options = {
series: [{
name: 'Fund',
data: seriesData,
}],
xAxis: {
},
yAxis: {
title: {
text: 'Value',
style: {
fontWeight: 'bold'
}
},
crosshair: true,
labels: {
style: {
color: '#77e8e3'
}
},
gridLineColor: '#777'
}
};
for (var i = 0; i < data.length; i++) {
date = new Date( data[i][0] );
seriesData.push(
data[i][1],
date
);
};
//options.xAxis.categories = dates;
console.log(options);
Highcharts.stockChart('chart-one', options);
});
});