How make the x-axis dynamic for handling date-time data and zooming. I wanted the x-axis to dynamically display the year, then month and year, and finally date and time based on the zoom level (zoomType: ‘x’). Here’s the complete implementation:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Dynamic xAxis</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var xAxisData = [
"07/12/2016 12:00:00 am",
"07/12/2016 01:00:00 am",
"07/12/2016 02:00:00 am",
"07/12/2016 03:00:00 am",
"07/12/2016 04:00:00 am",
"07/12/2016 12:00:00 pm",
"07/12/2016 01:00:00 pm",
"07/12/2016 02:00:00 pm",
"07/12/2016 03:00:00 pm",
"07/12/2016 11:00:00 pm",
"08/12/2016 05:00:00 am",
"08/12/2016 06:00:00 am",
"08/12/2016 07:00:00 am",
"08/12/2016 09:00:00 am",
"08/12/2016 10:00:00 am",
"08/12/2016 10:00:00 am",
"08/12/2016 12:00:00 pm",
"08/12/2016 03:34:29 pm",
"08/12/2016 04:00:00 pm",
"08/12/2016 05:00:00 pm",
"08/12/2016 06:34:29 pm",
"08/12/2016 07:34:29 pm",
"08/12/2016 08:34:29 pm",
"08/12/2016 10:00:00 pm",
"08/12/2016 11:00:00 pm",
"09/12/2016 12:00:00 am",
"09/12/2016 01:00:00 am",
"09/12/2016 02:00:00 am",
"09/12/2016 03:00:00 am",
"09/12/2016 04:00:00 am",
"09/12/2016 12:00:00 pm",
"09/12/2016 01:00:00 pm",
"09/12/2016 02:00:00 pm",
"09/12/2016 03:00:00 pm",
"09/12/2016 11:00:00 pm",
"10/12/2016 12:00:00 am",
"10/12/2016 01:00:00 am",
"10/12/2016 02:00:00 am",
"10/12/2016 03:00:00 am",
"10/12/2016 04:00:00 am",
"10/12/2016 12:00:00 pm",
"10/12/2016 01:00:00 pm",
"10/12/2016 02:00:00 pm",
"10/12/2016 03:00:00 pm",
"10/12/2016 11:00:00 pm"
];
var tabY= [
39966.31,
38054.98,
43569.27,
43619.26,
43735.39,
43619.26,
39895.25,
39966.31,
43201.27,
40043.66,
40071.34,
38794.64,
39480.24,
40869.52,
43735.39,
43582.69,
43735.39,
43692.54,
60093.51,
43201.27,
40093.51,
42580.97,
43619.26,
38556.31,
40043.66,
39000.49,
39966.31,
43201.27,
38865.23,
42093.24,
40071.34,
43637.56,
38996.11,
40071.34,
42093.24,
40014.85,
43576.01,
40093.51,
43201.27,
38865.23,
39966.31,
38794.64,
39895.25,
40093.51,
40043.66
];
Highcharts.chart('container', {
exporting: {
buttons: {
contextButton: {
menuItems: ["downloadPNG", "downloadPDF"]
}
},
sourceWidth: 1502,
scale: 1,
chartOptions: {
chart: {
height: this.chartHeight
}
}
},
chart: {
zoomType: 'x',
type: 'column'
},
title: {
text: 'Relevé de prélèvement des températures et de la Salinité',
align: 'left'
},
subtitle: {
text: "Site : " + data.nom + " du " + data.DisplayStartDate + " au " + data.DisplayEndDate + " (inclus)",
align: 'left'
},
xAxis: {
type: 'datetime',
title: {
text: "Date (Heure, GMT +03:00)"
},
categories: xAxisData
},
yAxis: {
min: 0,
title: {
text: selectedValues[0] === "1" ? "Conductivite" : "Temperature",
style: { color: "#B5C0D0" }
}
},
tooltip: {
valueSuffix: selectedValues[0] === "1" ? " µS/cm" : " °C",
xDateFormat: '%e %b %Y, %H:%M'
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'rgba(255,255,255,0.25)'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Conductivite',
data: tabY
}]
});
</script>
</body>
</html>
Output :
enter image description here
Wanted my x-axis to behave as much as follows :
https://www.highcharts.com/demo/highcharts/line-boost
Please help.