24-Hour Time Event Chart using HighCharts

Question

I am trying to replicate this chart below using HighCharts. Link to the image - https://www.fas.org/irp/doddir/army/figure7.htm

EDIT: May be I should explain the chart below. This chart below shows all the events that happened on a 24-hour time window and divided into 7 days. Each concentric circle inside the chart corresponds to a day of the week and each sector corresponds to a hour of that day of the week. So for example, from the chart below you can say that only 2 events happened between 3 AM and 4 AM, with one event occurring on Friday, and the second event occurring on Sunday.

The closest I have created is this - http://jsfiddle.net/bluechips23/ssywnc42/4/

The highchart settings from the jsfiddle link is as follows:

$(function () {
var daysOfWeek = ["M","T","W","TH","F","S","SU"];

$('#container').highcharts({

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: -10,
        endAngle: 350
    },

    xAxis: {
        tickInterval: 15,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                if(this.value == 0) {
                    return 24;
                } else {
                    return this.value*24/360;
                }
            }
        }
    },

    yAxis: {
        min: -10,
        tickInterval: 20,
        labels: {
            y:-10,
            x:5,
            formatter: function() {
                return daysOfWeek[this.value/20];
            }
        }
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 30
        },
        bubble: {
            minSize: 5,
            maxSize: 10
        }
    },

    series: [{
        type: 'bubble',
        name: 'Monday',
        data: [[25,20,5],[55,20,10],[95,20,5],[125,20,7],[160,20,9],
              [190,20,5],[220,20,8]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Tuesday',
        data: [[35,40,5],[65,40,10], [95,40,9],[125,40,8],[155,40,5],
              [190,40,7]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Wednesday',
        data: [[82,60,10], [188,60,8],[217,60,6]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Thursday',
        data: [[38,80,10],[68,80,8], [200,80,5]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Friday',
        data: [[23,100,10], [95,100,7],
               [172,100,10],[235,100,10]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Saturday',
        data: [[172,120,10],[218,120,10], [260,120,10]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Sunday',
        data: [[232,140,10],[247,140,10], [280,140,5],[67,140,8],[325,140,7]],
        pointPlacement: 'between'
    }]
});});

I don't need to display different types of events - just one type of event as shown in the jsfiddle link above works for me.

However, I am not sure how to implement the following things:

1. How do I start my 'M' (y-axis) with a bit of gap from the center, so it is bit more legible - similar to what the chart above shows where there is a mini circle at the center.

2. How do I 'move' the hours to the middle of the ticks? Right now, the '24', '1', etc appear right on top of the ticks - how do I center them between the ticks?

3. How do I display the days of the week ('M', 'T', 'W', etc) in between '24' and '1'? Right now they are between '23' and '24'. I tried to set the 'x' value to '5' in yAxis.labels but if you notice, only 'M' and may be 'T' is centered and the rest is all skewed.

EDIT 2 - Solution: Updated the chart to represent the 24-hour time event chart as closely as possible. I realize that the rotation of the hours is not necessary as long as it is clear that the events happen between the hours. Similarly, the events for the days can happen right on the Y-Axis, as opposed to between the lines, as in my case, I am only showing the number of events per day between a certain time.

The most important problem (for my project) that I solved was creating a white circle in the middle (thanks to Sebastian's suggestion to use custom Renderer) - the earlier chart (link above) would work but it just looked way too crowded at the origin. Now it looks decent enough.

Here's the JSFiddle link to the updated chart, in case someone has a similar question in the future. http://jsfiddle.net/bluechips23/ssywnc42/8/ (it looks better in full screen mode or when you maximize the result area).

Answer 1

You chart is not default, so you need to customise it by using renderer to add custom shapes. Each position can be calculated on xAxis tick positions (each of them keeps this value as pixels).