Bubble charts represent 3 dimensional data. First, a basic bubble chart with the "bubbleGradients: true" option to specify gradient fills. Radial gradients are not supported in IE version before IE 9 and will be automatically disabled.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready( function (){ var arr = [[11, 123, 1236, "Acura" ], [45, 92, 1067, "Alfa Romeo" ], [24, 104, 1176, "AM General" ], [50, 23, 610, "Aston Martin Lagonda" ], [18, 17, 539, "Audi" ], [7, 89, 864, "BMW" ], [2, 13, 1026, "Bugatti" ]]; var plot1 = $.jqplot( 'chart1' ,[arr],{ title: 'Bubble Chart with Gradient Fills' , seriesDefaults:{ renderer: $.jqplot.BubbleRenderer, rendererOptions: { bubbleGradients: true }, shadow: true } }); }); |
Data is passed in to a bubble chart as a series of [x, y, radius, <label or object>]. The optional fourth element of the data point can either be either a label string or an object having 'label' and/or 'color' properties to assign to the bubble.
By default, all bubbles are scaled according to the size of the plot area. The radius value in the data point will be adjusted to fit the bubbles in the chart. If the "autoscaleBubbles" option is set to false, the radius value in the data will be taken as a literal pixel value for the radius of the points.
Next are some basic customizations of bubble appearance with the "bubbleAlpha" and "highlightAlpha" options.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(document).ready( function (){ var arr = [[11, 123, 1236, "Acura" ], [45, 92, 1067, "Alfa Romeo" ], [24, 104, 1176, "AM General" ], [50, 23, 610, "Aston Martin Lagonda" ], [18, 17, 539, "Audi" ], [7, 89, 864, "BMW" ], [2, 13, 1026, "Bugatti" ]]; var plot2 = $.jqplot( 'chart2' ,[arr],{ title: 'Transparent Bubbles' , seriesDefaults:{ renderer: $.jqplot.BubbleRenderer, rendererOptions: { bubbleAlpha: 0.6, highlightAlpha: 0.8 }, shadow: true , shadowAlpha: 0.05 } }); }); |
In the following example, display of a custom toolip and highlighting of a custom table legend is performed by binding to the "jqplotDataHighlight" and "jqplotDataUnhighlight" events. The custom legend table here is dynamically created with a few lines of jQuery (O.K., it could be done in one line) based on the data array of the plot.
Tooltip and Custom Legend Highlighting -20 -10 0 10 20 30 40 50 60 70 -50 0 50 100 150 200 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | $(document).ready( function (){ var arr = [[11, 123, 1236, "Acura" ], [45, 92, 1067, "Alfa Romeo" ], [24, 104, 1176, "AM General" ], [50, 23, 610, "Aston Martin Lagonda" ], [18, 17, 539, "Audi" ], [7, 89, 864, "BMW" ], [2, 13, 1026, "Bugatti" ]]; var plot1b = $.jqplot( 'chart1b' ,[arr],{ title: 'Tooltip and Custom Legend Highlighting' , seriesDefaults:{ renderer: $.jqplot.BubbleRenderer, rendererOptions: { bubbleAlpha: 0.6, highlightAlpha: 0.8, showLabels: false }, shadow: true , shadowAlpha: 0.05 } }); // Legend is a simple table in the html. // Dynamically populate it with the labels from each data value. $.each(arr, function (index, val) { $( '#legend1b' ).append( '<tr><td>' +val[3]+ '</td><td>' +val[2]+ '</td></tr>' ); }); // Now bind function to the highlight event to show the tooltip // and highlight the row in the legend. $( '#chart1b' ).bind( 'jqplotDataHighlight' , function (ev, seriesIndex, pointIndex, data, radius) { var chart_left = $( '#chart1b' ).offset().left, chart_top = $( '#chart1b' ).offset().top, x = plot1b.axes.xaxis.u2p(data[0]), // convert x axis unita to pixels y = plot1b.axes.yaxis.u2p(data[1]); // convert y axis units to pixels var color = 'rgb(50%,50%,100%)' ; $( '#tooltip1b' ).css({left:chart_left+x+radius+5, top:chart_top+y}); $( '#tooltip1b' ).html( '<span style="font-size:14px;font-weight:bold;color:' + color + ';">' + data[3] + '</span><br />' + 'x: ' + data[0] + '<br />' + 'y: ' + data[1] + '<br />' + 'r: ' + data[2]); $( '#tooltip1b' ).show(); $( '#legend1b tr' ).css( 'background-color' , '#ffffff' ); $( '#legend1b tr' ).eq(pointIndex+1).css( 'background-color' , color); }); // Bind a function to the unhighlight event to clean up after highlighting. $( '#chart1b' ).bind( 'jqplotDataUnhighlight' , function (ev, seriesIndex, pointIndex, data) { $( '#tooltip1b' ).empty(); $( '#tooltip1b' ).hide(); $( '#legend1b tr' ).css( 'background-color' , '#ffffff' ); }); }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "../jquery.min.js" ></ script > < script type = "text/javascript" src = "../jquery.jqplot.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.bubbleRenderer.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> |