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>