Highchart area chart with date time

Question

In the highchart area chart I have to add date in x axis and punch in time in y axis. Its for the punch in time a student in a month. So it have n number of date time values and represent it in area chart. How the date and time used in area chart? Its my code.

 Highcharts.chart('batch_range_chart', { chart: { type: 'area' }, title: { text: '' }, subtitle: { text: '' }, yAxis: { title: { text: 'Time (hh:mm)' }, type: 'datetime', }, xAxis: { title: { text: 'Date' }, type: 'datetime', dateTimeLabelFormats: { //month: '%b \\'%y', } }, tooltip: { //pointFormat: '{series.name} Check In Time <b>{point.y:,.0f}</b><br/>' }, plotOptions: { area: { } }, series: [{ name: 'Check In Time', data: [ [1514831400, 10: 00: 00], [1514917800, 14: 30: 00], [1515004200, 11: 00: 00], [1515090600, 09: 00: 00] ], color: '#6767af' }, ] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="batch_range_chart" style="min-width:100%; height: 280px; margin: 0 auto"> </div> 

Its the graph

Answer 1

For Date : You can put the date as Date.UTC(2018, 10, 15)
For Time It one numeric value which you can calculate on the basis of seconds,minutes,or miliseconds for showing on the graph.

yAxis formatter you can keep as:

formatter: function() {
          var time = this.value;
          var hours1 = parseInt(time / 60);
          var mins1 = parseInt(parseInt(time % 60));
          return hours1 + ':' + mins1;
        }

In the above formatter, its calculating the hours and minutes based on total number of minutes. eg 100 min = 1:40AM

 function minutesToHHMM (mins, twentyFour = false) { let h = Math.floor(mins / 60); let m = mins % 60; m = m < 10 ? '0' + m : m; if (twentyFour) { h = h < 10 ? '0' + h : h; return `${h}:${m}`; } else { let a = 'am'; if (h >= 12) a = 'pm'; if (h > 12) h = h - 12; return `${h}:${m} ${a}`; } } $(function() { $('#container').highcharts({ chart: { type: 'column' }, xAxis: { type: 'datetime', dateTimeLabelFormats: { day: '%e of %b' } }, yAxis: { title: { text: 'Time (hh:mm)' }, max: 1440, tickInterval: 10, labels: { formatter: function() { var time = this.value; return minutesToHHMM(time); } } }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }, }, series: [{ data: [ [Date.UTC(2018, 10, 15), 1440], [Date.UTC(2018, 10, 16), 200], [Date.UTC(2018, 10, 17), 300], [Date.UTC(2018, 10, 18), 0] ] }] }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>