Highcharts - bubble chart with titles at x- and y-Axis - Error #14

Question

I'm looking for a way to show a Highcharts bubble chart for the following case:

I want to show project names on the X-Axis ("project a", "project b") and the team-member names on the y-axis (e.g. "tom", "bill", "john"). The bubbles are intented to visualize the time spent by each team member on each project.

The data series should be something like ['project a', 'tom', 25.0], ['project b', 'john', 12.5]..., but trying this results in "Highcharts Error #14: String value sent to series.data, expected Number"

Is it possible to have a Highcharts bubble/3d bubble chart with string-values on the x- and y-axis instead of numbers, or is there a way to achieve something similar?

Any guidance would be appreciated.

Thanks.

Answer 1

All you're talking about is categorical axes - no tricks required.

http://jsfiddle.net/jlbriggs/36zn2/1/

       xAxis: {
            categories:['Project 1', 'Project 2', 'Project 3']
        },
       yAxis: {
           categories:['User 1', 'User 2', 'User 3']
        },

The numerical value to use in your data is the array index of the category.

Answer 2

I've done something here http://jsfiddle.net/36zn2/ which should help you.

The labels in the x and y axis are being calculated using a formatter function, which translates numerical project codes and staff codes into text from an array.

var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];


    xAxis: {
        labels: {tickInterval:1,
            formatter: function () {
                return projects[this.value]
            }
        }
    },

    yAxis: {
        labels: {
            formatter: function () {
                return names[this.value]
            }
        }
    },

If you can't change the format of your data, the you can iterate through the data array building up the mapping of project names and staff names to create a numerical version of the data plus the mapping arrays.