Create bubble chart with two series

Description

The following code shows how to create bubble chart with two series.

Example


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(function () {<!--  w w w  . j a va  2  s.c  om-->
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        series: [{
            data: [
                [91, 81, 63],
                [918, 5, 89],
                [151, 50, 73],
                [41, 22, 14],
                [158, 124, 20],
                [78, 137, 34],
                [515, 516, 53],
                [18, 415, 70],
                [42, 414, 28],
                [3, 52, 59],
                [31, 18, 97],
                [719, 911, 63],
                [93, 23, 23],
                [414, 183, 22]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(25,255,55,0.5)'],
                        [1, 'rgba(169,14,167,0.5)']
                    ]
                }
            }
        }, {
            data: [
                [42, 38, 20],
                [61, 18, 11],
                [11, 93, 55],
                [57, 21, 90],
                [-80, 76, 22],
                [11, 74, 96],
                [88, 56, 110],
                [30, -47, 49],
                [57, 62, 98],
                [41, -16, 116],
                [46, 101, 111],
                [-22, 87, 89],
                [57, 91, 82],
                [45, -15, -98]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,25,155,0.5)'],
                        [1, 'rgba(170,120,167,0.5)']
                    ]
                }
            }
        }]      
    });  
});
</script>
</head>
<body>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-more.js"></script>
  <div id="container" style="height: 400px"></div>
</body>
</html>

Click to view the demo





















Home »
  highcharts »
    Chart by Type »




Area Chart
Bar Chart
Boxplot Chart
Bubble Chart
Column Chart
Gauge Chart
Line Chart
Pie Chart
Polar Chart
Scatter Chart
Spline Chart