Class LABKEY.vis.BarPlot
BarPlot wrapper to allow a user to easily create a simple bar plot without having to preprocess the data.
Defined in: plot.js.
Constructor Attributes | Constructor Name and Description |
---|---|
LABKEY.vis.BarPlot(config)
|
Config Attributes | Config Name and Description |
---|---|
The array of individual data points to be grouped for the bar plot.
|
|
(Optional) Display options as defined in LABKEY.vis.Geom.BarPlot.
|
|
The id of the div/span to insert the svg element into.
|
|
The function to determine which groups will be created for the x-axis of the plot.
|
Class Detail
LABKEY.vis.BarPlot(config)
<div id='bar'></div> <script type="text/javascript"> // Fake data which will be aggregated by the LABKEY.vis.BarPlot wrapper. var barPlotData = [ {gender: 'Male', age: '21'}, {gender: 'Male', age: '43'}, {gender: 'Male', age: '24'}, {gender: 'Male', age: '54'}, {gender: 'Female', age: '24'}, {gender: 'Female', age: '33'}, {gender: 'Female', age: '43'}, {gender: 'Female', age: '43'}, ]; // Create a new bar plot object. var barChart = new LABKEY.vis.BarPlot({ renderTo: 'bar', rendererType: 'd3', width: 900, height: 300, labels: { main: {value: 'Example Bar Plot With Cumulative Totals'}, yLeft: {value: 'Count'}, x: {value: 'Value'} }, options: { color: 'black', fill: '#c0c0c0', lineWidth: 1.5, colorTotal: 'black', fillTotal: 'steelblue', opacityTotal: .8, showCumulativeTotals: true, showValues: true }, xAes: function(row){return row['age']}, data: barPlotData }); barChart.render(); </script>
- Parameters:
- {Object} config
- An object that contains the following properties (in addition to those properties defined in LABKEY.vis.Plot).
Config Detail
{Array}
config.data
The array of individual data points to be grouped for the bar plot. The LABKEY.vis.BarPlot
wrapper will aggregate the data in this array based on the xAes function provided to get the individual totals
for each bar in the plot.
{Object}
config.options
(Optional) Display options as defined in LABKEY.vis.Geom.BarPlot.
{String}
config.renderTo
The id of the div/span to insert the svg element into.
{Function}
config.xAes
The function to determine which groups will be created for the x-axis of the plot.