Flot plugin to create bubble charts
var d1 = [[20,20,10], [40,50,20], [70,10,5], [80,80,15]];
var d2 = [[60,25,15], [70,40,6], [30,80,4]];
var options = {
series: {
//color: '#CCC',
color: function(x, y, value) {
var red = 55 + value * 10;
return 'rgba('+red+',50,50,1)';
},
bubbles: {
active: true,
show: true,
fill: true,
linewidth: 2,
bubblelabel: { show: true }
}
},
grid:{
hoverable: true,
clickable: true
}
};
var p4 = $.plot( $("#plot"), [ d1, { color: '#AAA', data: d2 }], options );
-
data: Data Array specific for Bubbles chart
- [0]: first data entry
- [0]: Y-value, location of bubble
- [1]: X-value, location of value
- [2]: Size of bubble
- [0]: first data entry
-
options: options for bubbles
- series: series options for bubbles
- bubbles: bubbles only options
- active: activate the plugin (false)
- show: show specific serie. this needs to be overwritten in data (false)
- fill: Fill bubbles (true)
- lineWidth: Line width of circle if fill is false (2)
- highlight: Used to highlight in case of HOVER
- opacity: only Opacity is supported for Highlighting (yet) (0.5)
- show: enable highlighting on hover (false)
- drawbubble: Function call which is used for drawing of one bar for Bubble. This can be replaced by user defined function. Take a closer look to source of examples to see more. (drawbubbleDefault(ctx,serie,x,y,v,r,c,overlay))
- bubblelabel: Specific options how to show label in bubbles
- show: Switches labels on (or off) (false)
- fillStyle: Color of text (black)
- editMode: Default Editmode for bandwidth. See mouse plugin for more information.
- nearBy: data used to support findItem for hover, click etc.
- distance: distance in pixel to find nearest bubble (6)
- findMode: Defines how find happens. (circle)
- findItem: Function call to find item under Cursor. Is overwritten during processRawData hook. This would be the place to add your own find function, which will not be overwritten. (findNearbyItemDefault(mouseX,mouseY,i,serie))
- drawEdit: function to draw edit marker. It is defined in jquery.flot.mouse plugin, and is overwritten in plugin to support specific editmarkers (drawEditDefault(octx,x,y,serie))
- drawHover: Function to draw overlay in case of hover a item. Is overwritten during processRawData hook. This would be the place to add your own hover drawing function. (drawHoverDefault(octx,serie,dataIndex))
- findMode: Choose between selecting either the most nearby bubble, or the first one that is encountered. (nearby)
- series
- bubbles
- active: [true] boolean
- show: [true] boolean
- fill: [true] boolean
- lineWidth: [2] number
- bubbles
- grid
- hoverable: [true] boolean
- clickable: [true] boolean
- series
- bubbles
- active [true] boolean
- show [true] boolean
- fill [true] boolean
- linewidth [2] number
- bubblelabel: object
- show [true] boolean
- bubbles
- grid
- hoverable [true] boolean
- clickable [true] boolean
- series
- bubbles
- active [true] boolean
- show [true] boolean
- fill [true] boolean
- lineWidth [2] number
- drawbubble function
- bubbles
- grid
- hoverable [true] boolean
- clickable [true] boolean
- series
- bubbles
- active [true] boolean
- show [true] boolean
- linewidth [2] number
- editMode [xy] string
- editable [true] boolean
- bubbles
- grid
- hoverable [true] boolean
- clickable [true] boolean
- editable [true] boolean
Licensed under MIT
This plugin is based on a plugin by Juergen Marsch
- first release of Juergen Marsch's original code
- removed dependency to JUMlib
- code cleanup
series.color
can be of typefunction
(thx @stesie)
- support 'plothover' events; (issue #2)
- support the
jquery.flot.tooltip
plugin - code cleanup
- bugfix if x or y == 0; (issue #2)
- bugfix: only load plugin if options.series.bubbles.active is set; (issue #3)
- bugfix: highlight bubbles on hover; (issues #5, #6)