highchart scatter with 24 hours time on y axis and the day of the transaction on x axis

Question

I have some transaction data, and i want to create graphical chart report with y axis which have 24 hours (what time did the transaction occured) and x axis which explain what day did the transaction occured.

I use jquery highchart scatter, and i want something like this example. This is result when I use a little example data.

But when I insert too many data, it become weird like this weird result.

This is my code:

Highcharts.chart('graph', {
chart: {
    type: 'scatter',
    zoomType: 'xy'
},
title: {
    text: 'Transaction Hour'
},
subtitle: {
    text: '1 year'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    title: {
        enabled: true,
        text: 'Days'
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
},
yAxis: {
    title: {
    enabled: true,
    text: 'Time'
},
type: 'datetime',
dateTimeLabelFormats: { //force all formats to be hour:minute:second
        second: '%H:%M:%S',
        minute: '%H:%M:%S',
        hour: '%H:%M:%S',
        day: '%H:%M:%S',
        week: '%H:%M:%S',
        month: '%H:%M:%S',
        year: '%H:%M:%S'
}
},
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
    borderWidth: 1
},
plotOptions: {
    scatter: {
        marker: {
            radius: 4,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x}, {point.y}'
        }
    }
},
series: [{
    name: 'A',
    color: 'rgba(153, 255, 102, .5)',
    data: [[Friday,1580455597000]]// unix timestamp

}, {name: 'B',
    color: 'rgba(223, 83, 83, .5)',
    data: [[Thursday,1580372483000],[Thursday,1580359660000]]// unix timestamp

}, {
    name: 'C',
    color: 'rgba(119, 152, 191, .5)',
    data: [[Friday,1580439732000]]// unix timestamp
}]
});

Can you help me?Thank you before.

Best Regards,

Eka

Answer 1

Notice that using this structure of data totally disturbs your config. You have set the yAxis.type to the 'datatime' and you want to have the range 24 hours range, but one of your data points is Fri Jan 31 2020 07:26:37 and the second one is Thu Jan 30 2020 08:21:23 what gives you almost 23 hours range between only two points. Adding the third point makes that your yAxis will increase to another time range.

Try to use this config instead: https://jsfiddle.net/BlackLabel/5e6sfcuq/

I used the labels.formatter callback to get the wanted format on axes. And the min and max features on the yAxis to keep the constant range.

And here is my proposal of data structure:

data: [
  [1580455597000,new Date(1580455597000).getHours()]
] // unix timestamp

API: https://api.highcharts.com/highcharts/yAxis.labels.formatter

API: https://api.highcharts.com/highcharts/yAxis.tickInterval

If something is unclear - feel free to ask.