Class LABKEY.vis.Plot
Plot which allows a user to programmatically create a plot/visualization.
Defined in: plot.js.
Constructor Attributes | Constructor Name and Description |
---|---|
LABKEY.vis.Plot(config)
|
Config Attributes | Config Name and Description |
---|---|
(Optional) An object containing all of the requested aesthetic mappings.
|
|
(Optional) The string representation of the background color.
|
|
(Optional) The string representation of the color to use for the border (axes).
|
|
(Optional) The border line width with the x and y axis.
|
|
(Optional) Configuration for brushing events on the plot.
|
|
(Optional) Used to toggle the use of a clipRect, which prevents values that appear
outside of the specified grid area from being visible.
|
|
(Optional) The array of data used while rendering the plot.
|
|
(Optional) Object indicating which plot axes to disable.
|
|
(Optional) Font-family to use for plot text (labels, legend, etc.
|
|
(Optional) The string representation of the grid color.
|
|
(Optional) The string representation of the line colors used as part of the grid.
|
|
(Optional) String indicating if only the 'x' or 'y' axis grid lines
should be shown for this plot.
|
|
(Optional) The line width for the grid lines of the plot.
|
|
The plot height in pixels.
|
|
(Optional) Used in combination with requireYLogGutter and requireXLogGutter to
shift the main plot's axis position in order to show log gutters.
|
|
(Optional) Used to draw the X axis to separate positive and negative values
for log scale plot in the undefined Y gutter plot.
|
|
(Optional) Used to draw the Y axis to separate positive and negative values
for log scale plot in the undefined X gutter plot.
|
|
(Optional) An object with the following properties: main, subtitle, x, y (or yLeft), yRight.
|
|
An array of LABKEY.vis.Layer objects.
|
|
(Optional) An array of objects to be used for the plot legend.
|
|
(Optional) True to force legend text in a single line.
|
|
(Optional) Used to specify where the legend will render.
|
|
(Optional) Margin sizes in pixels.
|
|
(Optional) Used to adjust domains with non-positive lower bound and generate x axis
log scale wrapper for plots that contain <= 0 x value.
|
|
(Optional) Used to adjust domains with non-positive lower bound and generate y axis
log scale wrapper for plots that contain <= 0 y value.
|
|
The id of the div/span to insert the svg element into.
|
|
(Optional) Used to indicate that the plot has non-positive data on y dimension
that should be displayed in x log gutter in log scale.
|
|
(Optional) Used to indicate that the plot has non-positive data on x dimension
that should be displayed in y log gutter in log scale.
|
|
(Optional) An object that describes the scales needed for each axis or dimension.
|
|
(Optional) Used to toggle between the plot throwing errors or displaying errors.
|
|
(Optional) The string representation of the color to use for the tick marks on
the x and y axes.
|
|
(Optional) The length, in pixels for the x and y axis tick marks.
|
|
(Optional) The degree of rotation for overlapping x axis tick labels.
|
|
(Optional) The string representation of the color to use for the x and y
axis tick labels.
|
|
(Optional) The x and y axis tick line width.
|
|
The plot width in pixels.
|
Class Detail
LABKEY.vis.Plot(config)
In this example we will create a simple scatter plot. <div id='plot'> </div id='plot'> <script type="text/javascript"> var scatterData = []; // Here we're creating some fake data to create a plot with. for(var i = 0; i < 1000; i++){ var point = { x: {value: parseInt((Math.random()*(150)))}, y: Math.random() * 1500 }; scatterData.push(point); } // Create a new layer object. var pointLayer = new LABKEY.vis.Layer({ geom: new LABKEY.vis.Geom.Point() }); // Create a new plot object. var scatterPlot = new LABKEY.vis.Plot({ renderTo: 'plot', width: 900, height: 700, data: scatterData, layers: [pointLayer], aes: { // Aesthetic mappings can be functions or strings. x: function(row){return row.x.value}, y: 'y' } }); scatterPlot.render(); </script>
In this example we create a simple box plot. <div id='plot'> </div id='plot'> <script type="text/javascript"> // First let's create some data. var boxPlotData = []; for(var i = 0; i < 6; i++){ var group = "Group "+(i+1); for(var j = 0; j < 25; j++){ boxPlotData.push({ group: group, //Compute a random age between 25 and 55 age: parseInt(25+(Math.random()*(55-25))), gender: parseInt((Math.random()*2)) === 0 ? 'male' : 'female' }); } for(j = 0; j < 3; j++){ boxPlotData.push({ group: group, //Compute a random age between 75 and 95 age: parseInt(75+(Math.random()*(95-75))), gender: parseInt((Math.random()*2)) === 0 ? 'male' : 'female' }); } for(j = 0; j < 3; j++){ boxPlotData.push({ group: group, //Compute a random age between 1 and 16 age: parseInt(1+(Math.random()*(16-1))), gender: parseInt((Math.random()*2)) === 0 ? 'male' : 'female' }); } } // Now we create the Layer. var boxLayer = new LABKEY.vis.Layer({ geom: new LABKEY.vis.Geom.Boxplot({ // Customize the Boxplot Geom to fit our needs. position: 'jitter', outlierOpacity: '1', outlierFill: 'red', showOutliers: true, opacity: '.5', outlierColor: 'red' }), aes: { hoverText: function(x, stats){ return x + ':\nMin: ' + stats.min + '\nMax: ' + stats.max + '\nQ1: ' + stats.Q1 + '\nQ2: ' + stats.Q2 + '\nQ3: ' + stats.Q3; }, outlierHoverText: function(row){ return "Group: " + row.group + ", Age: " + row.age; }, outlierShape: function(row){return row.gender;} } }); // Create a new Plot object. var boxPlot = new LABKEY.vis.Plot({ renderTo: 'plot', width: 900, height: 300, labels: { main: {value: 'Example Box Plot'}, yLeft: {value: 'Age'}, x: {value: 'Groups of People'} }, data: boxPlotData, layers: [boxLayer], aes: { yLeft: 'age', x: 'group' }, scales: { x: { scaleType: 'discrete' }, yLeft: { scaleType: 'continuous', trans: 'linear' } }, margins: { bottom: 75 } }); boxPlot.render(); </script>
- Parameters:
- {Object} config
- An object that contains the following properties.
Config Detail
{Object}
config.aes
(Optional) An object containing all of the requested aesthetic mappings. Like
config.data, config.aes is optional at the plot level because it can be defined at the layer level as
well, however, if config.aes is not present at the plot level it must be defined within each
LABKEY.vis.Layer}. The aesthetic mappings required depend entirely on the LABKEY.vis.Geoms being
used in the plot. The only maps required are config.aes.x and
config.aes.y (or alternatively yLeft or yRight). To find out the available aesthetic
mappings for your plot, please see the documentation for each Geom you are using.
{String}
config.bgColor
(Optional) The string representation of the background color. Defaults to white.
{String}
config.borderColor
(Optional) The string representation of the color to use for the border (axes).
Defaults to black.
{Integer}
config.borderWidth
(Optional) The border line width with the x and y axis. Defaults to 1.
{Object}
config.brushing
(Optional) Configuration for brushing events on the plot.
The object may contain any of the following properties:
- brush: Callback function during the brush event.
- brushclear: Callback function for when the brush event is cleared.
- brushend: Callback function for when the brush event ends.
- brushstart: Callback function for when the brush event starts.
{Boolean}
config.clipRect
(Optional) Used to toggle the use of a clipRect, which prevents values that appear
outside of the specified grid area from being visible. Use of clipRect can negatively affect performance, do not
use if there is a large amount of elements on the grid. Defaults to false.
{Array}
config.data
(Optional) The array of data used while rendering the plot. This array will be used in
layers that do not have any data specified. Note: While config.data is optional, if it is not present
in the Plot object it must be defined within each LABKEY.vis.Layer. Data must be array based, with each
row of data being an item in the array. The format of each row does not matter, you define how the data is
accessed within the config.aes object.
{Object}
config.disableAxis
(Optional) Object indicating which plot axes to disable. Options include
xTop, xBottom, yLeft, and yRight.
{String}
config.fontFamily
(Optional) Font-family to use for plot text (labels, legend, etc.).
{String}
config.gridColor
(Optional) The string representation of the grid color. Defaults to white.
{String}
config.gridLineColor
(Optional) The string representation of the line colors used as part of the grid.
Defaults to grey (#dddddd).
{String}
config.gridLinesVisible
(Optional) String indicating if only the 'x' or 'y' axis grid lines
should be shown for this plot. Default, without this property, is to show both x and y grid lines.
{Integer}
config.gridLineWidth
(Optional) The line width for the grid lines of the plot. Defaults to 1.
{Number}
config.height
The plot height in pixels. This is the height of the entire plot, including margins and
labels.
{Boolean}
config.isMainPlot
(Optional) Used in combination with requireYLogGutter and requireXLogGutter to
shift the main plot's axis position in order to show log gutters.
{Boolean}
config.isShowXAxis
(Optional) Used to draw the X axis to separate positive and negative values
for log scale plot in the undefined Y gutter plot.
{Boolean}
config.isShowYAxis
(Optional) Used to draw the Y axis to separate positive and negative values
for log scale plot in the undefined X gutter plot.
{Object}
config.labels
(Optional) An object with the following properties: main, subtitle, x, y (or yLeft), yRight.
Each property can have a {String} value, {Boolean} lookClickable, {Object} listeners, and other properties listed below.
The value is the text that will appear on the label, lookClickable toggles if the label will appear clickable, and the
listeners property allows the user to specify listeners on the labels such as click, hover, etc, as well as the functions to
execute when the events occur. Each label will be an object that has the following properties:
- value: The string value of the label (i.e. "Weight Over Time").
- fontSize: The font-size in pixels.
- position: The number of pixels from the edge to render the label.
- lookClickable: If true it styles the label so that it appears to be clickable. Defaults to false.
- visibility: The initial visibility state for the label. Defaults to normal.
- cls: Class added to label element.
- listeners: An object with properties for each listener the user wants attached to the label. The value of each property is the function to be called when the event occurs. The available listeners are: click, dblclick, hover, mousedown, mouseup, mousemove, mouseout, mouseover, touchcancel, touchend, touchmove, and touchstart.
{Array}
config.layers
An array of LABKEY.vis.Layer objects.
{Array}
config.legendData
(Optional) An array of objects to be used for the plot legend. Each object can
include the legend item text, color, and shape.
{Boolean}
config.legendNoWrap
(Optional) True to force legend text in a single line.
Defaults to false.
{String}
config.legendPos
(Optional) Used to specify where the legend will render. Currently only supports
"none" to disable the rendering of the legend. There are future plans to support "left" and "right" as well.
Defaults to "right".
{Object}
config.margins
(Optional) Margin sizes in pixels. It can be useful to set the margins if the tick
marks on an axis are overlapping with your axis labels. Defaults to top: 75px, right: 75px, bottom: 50px, and
left: 75px. The right side may have a margin of 150px if a legend is needed. Custom define margin size for a
legend that exceeds 150px.
The object may contain any of the following properties:
- top: Size of top margin in pixels.
- bottom: Size of bottom margin in pixels.
- left: Size of left margin in pixels.
- right: Size of right margin in pixels.
{Float}
config.minXPositiveValue
(Optional) Used to adjust domains with non-positive lower bound and generate x axis
log scale wrapper for plots that contain <= 0 x value.
{Float}
config.minYPositiveValue
(Optional) Used to adjust domains with non-positive lower bound and generate y axis
log scale wrapper for plots that contain <= 0 y value.
{String}
config.renderTo
The id of the div/span to insert the svg element into.
{Boolean}
config.requireXLogGutter
(Optional) Used to indicate that the plot has non-positive data on y dimension
that should be displayed in x log gutter in log scale.
{Boolean}
config.requireYLogGutter
(Optional) Used to indicate that the plot has non-positive data on x dimension
that should be displayed in y log gutter in log scale.
{Object}
config.scales
(Optional) An object that describes the scales needed for each axis or dimension. If
not defined by the user we do our best to create a default scale determined by the data given, however in some
cases we will not be able to construct a scale, and we will display or throw an error. The possible scales are
x, y (or yLeft), yRight, color,
shape, and size. Each scale object will have the following properties:
- scaleType: possible values "continuous" or "discrete".
- trans: with values "linear" or "log". Controls the transformation of the data on the grid.
- min: (deprecated, use domain) the minimum expected input value. Used to control what is visible on the grid.
- max: (deprecated, use domain) the maximum expected input value. Used to control what is visible on the grid.
- domain: For continuous scales it is an array of [min, max]. For discrete scales it is an an array of all possible input values to the scale.
- range: An array of values that all input values (the domain) will be mapped to. Not used for any axis scales. For continuous color scales it is an array[min, max] hex values.
- sortFn: If scaleType is "discrete", the sortFn can be used to order the values of the domain
- tickFormat: Add axis label formatting.
- tickValues: Define the axis tick values. Array of values.
- tickDigits: Convert axis tick to exponential form if equal or greater than number of digits
- tickLabelMax: Maximum number of tick labels to show for a categorical axis.
- tickHoverText:: Adds hover text for axis labels.
- tickCls: Add class to axis label.
- tickRectCls: Add class to mouse area rectangle around axis label.
- tickRectHeightOffset: Set axis mouse area rect width. Offset beyond label text width.
- tickRectWidthOffset: Set axis mouse area rect height. Offset beyond label text height.
- tickClick: Handler for axis label click. Binds to mouse area rect around label.
- tickMouseOver: Handler for axis label mouse over. Binds to mouse area rect around label.
- tickMouseOut: Handler for axis label mouse out. Binds to mouse area rect around label.
{Boolean}
config.throwErrors
(Optional) Used to toggle between the plot throwing errors or displaying errors.
If true the plot will throw an error instead of displaying an error when necessary and possible. Defaults to
false.
{String}
config.tickColor
(Optional) The string representation of the color to use for the tick marks on
the x and y axes. Defaults to black.
{Integer}
config.tickLength
(Optional) The length, in pixels for the x and y axis tick marks. Defaults to 8.
{Integer}
config.tickOverlapRotation
(Optional) The degree of rotation for overlapping x axis tick labels.
Defaults to 15 degrees.
{String}
config.tickTextColor
(Optional) The string representation of the color to use for the x and y
axis tick labels. Defaults to black.
{Integer}
config.tickWidth
(Optional) The x and y axis tick line width. Defaults to 1.
{Number}
config.width
The plot width in pixels. This is the width of the entire plot, including margins, the
legend, and labels.