Class Index | File Index

Classes


Class LABKEY.vis.Plot

Plot which allows a user to programmatically create a plot/visualization.
Defined in: plot.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
LABKEY.vis.Plot(config)
Config Summary
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) 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) 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.
 
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, x, y (or yLeft), yRight.
 
An array of LABKEY.vis.Layer objects.
 
(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.
 
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.

{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.

{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).

{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, 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:

{Array} config.layers
An array of LABKEY.vis.Layer objects.

{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:

{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:

{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.

{Number} config.width
The plot width in pixels. This is the width of the entire plot, including margins, the legend, and labels.

Documentation generated by JsDoc Toolkit 2.3.2 on Sat Dec 03 2016 18:27:34 GMT-0000 (UTC)