Highcharts bubble chart with multiple series

Question

I am using highcharts to create bubble chart. I pass x,y and z co-ordinates as data. It displays circle with different radius with single legend entry at bottom. I need legend for individual circle in the bubble chart so i created different series for individual bubble. I got different legend but the size of circles are same. Please see my code below. Please let me know what is wrong in this. Thanks in advance




    $.each(input,function(index,value) {        
        red = Math.floor(Math.random() * 255);
        blue = Math.floor(Math.random() * 255);
        green = Math.floor(Math.random() * 255);    
        color = red  + ',' + green + ',' + blue;
        chartData .push({
            name : value.departmentName,                
            marker: {
                symbol:'circle',
                fillColor:{
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [[0, 'rgba(255,255,255,0.5)'],[1, Highcharts.Color('rgba(' + color+ ',0.5)').brighten(-0.3).get('rgb')]]},

                lineColor:'rgba(' + color + ',.75)',
                lineWidth:1,           
                states:{
                    hover:{
                        enabled:false
                    }
                }
            },
            data: [{x:value.year, y:value.numberOfUsers, name: value.departmentName, marker: {radius:value.passcount,
                fillColor:{
                    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                    stops: [[0, 'rgba(255,255,255,0.5)'],[1, Highcharts.Color('rgba(' + color+ ',0.5)').brighten(-0.3).get('rgb')]]}}, z : value.passcount}]
           });      

        });
        return chartData;

    

    ...

    


     function drawChart (chartData){
            //High charts
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo:'container',                       
                    type: 'bubble',
                    plotBorderWidth: 1 ,
                    zoomType: 'xy'
                },
                title:{
                    text:''
                },
                exporting:{
                    enabled : false
                },
               credits: {
                enabled: false
               },
                plotOptions: {
                    series: {
                        shadow:false,
                    }           
                },
                xAxis:{
                    minPadding:.075,
                    maxPadding:.075,
                    lineColor:'#999',
                    lineWidth:1,
                    tickColor:'#666',
                    tickLength:3,
                    title:{
                        text:'My chart'
                    }
                },
                yAxis:{
                    lineColor:'#999',
                    lineWidth:1,
                    tickColor:'#666',
                    tickWidth:1,
                    tickLength:3,
                    gridLineColor:'#ddd',
                    title:{
                        text:'Number Of Users',
                        rotation:270,
                        margin:10,
                    }
                },
                series: chartData

            });

The output for above code is as below

Torstein Hønsi Torstein Hønsi · Accepted Answer · 2013-02-08T08:30:10

As you know, Highcharts Bubbles are not yet officially released. However, in the latest development code, that bubble sizes are adjusted across series, so you are probably just loading some older code. Try running Highcharts from http://github.highcharts.com/rambera/highcharts.js and http://github.highcharts.com/rambera/highcharts-more.js.

Highcharts bubble chart with multiple series

1 Answers