Class LABKEY.Chart
Chart class to create and render live charts and imagemaps.
Additional Documentation:
Defined in: Chart.js.
Constructor Attributes | Constructor Name and Description |
---|---|
LABKEY.Chart(config)
Chart class to create and render live charts and imagemaps.
|
Config Attributes | Config Name and Description |
---|---|
The type of chart to plot.
|
|
Name of the column to plot on the X axis.
|
|
Name of the column (or columns)
to plot on the Y axis.
|
|
The container path in which the data for this chart is defined.
|
|
Javascript function that can be used as a callback
if an error occurs.
|
|
Height in pixels
|
|
Javascript function that will be used in the URL's of the generated image map.
|
|
Name(s) of additional columns whose names and values should be added
To the JSON object for the config.imageMapCallback function.
|
|
Log scale X axis.
|
|
Log scale Y axis.
|
|
Name of a query table associated with the
chosen schema.
|
|
Element on the page where the imagemap will render.
|
|
Element on the page where the chart will render.
|
|
Name of a schema defined within the current
container.
|
|
Show lines between symbols.
|
|
If multiple Y columns are specified,
display each in its own plot.
|
|
If there are multiple Y axis
columns, display a separate Y axis for each column on the same plot.
|
|
If showMultipleCharts is 'true' this
option controls whether charts are plotted vertically or
horizontally (the default).
|
|
Name of a custom view associated with the
chosen query.
|
|
Width in pixels
|
Field Attributes | Field Name and Description |
---|---|
<static> <constant> |
LABKEY.Chart.TIME
Time-based chart
|
<static> <constant> |
LABKEY.Chart.XY
Scatterplot-type chart
|
Method Attributes | Method Name and Description |
---|---|
render()
Renders the chart to the div tags as specified in the config object passed to the constructor.
|
Class Detail
LABKEY.Chart(config)
Chart class to create and render live charts and imagemaps.
Additional Documentation:
Example #1 uses the "Physical Exam" dataset in the Demo Study to plot a simple chart with one y-value:<script type="text/javascript"> var chartConfig = { schemaName: 'study', queryName: 'Physical Exam', renderTo: 'chartDiv', chartType: LABKEY.Chart.XY, columnXName: 'APXbpsys', columnYName: 'APXbpdia', }; var chart = new LABKEY.Chart(chartConfig); chart.render(); </script> <div id="chartDiv"></div> Example #2 demonstrates plotting of multiple y-values: <script type="text/javascript"> var chartConfig2 = { queryName: 'Physical Exam', schemaName: 'study', chartType: LABKEY.Chart.XY, renderTo: 'chartDiv2', columnXName: 'APXwtkg', columnYName: ['APXwtkg', 'APXbpsys', 'APXbpdia'] }; var chart = new LABKEY.Chart(chartConfig2); chart.render(); </script> <div id="chartDiv2"></div> Example #3 demonstrates image map support: <script type="text/javascript"> var chartConfig = { schemaName: 'study', queryName: 'Physical Exam', renderTo: 'chartDiv3', renderImageMapTo: 'imageDiv', chartType: LABKEY.Chart.XY, columnXName: 'APXbpsys', columnYName: 'APXbpdia', imageMapCallback: 'showInfo' }; var chart = new LABKEY.Chart(chartConfig); chart.render(); function showInfo(info) { alert("key: " + info.key + "x: " + info.x + "y: " + info.y); } </script> <div id="chartDiv3"></div> <div id="imageDiv"></div>
- Parameters:
- {Object} config
- Describes the chart's properties.
Config Detail
{LABKEY.Chart.TIME|LABKEY.Chart.XY}
config.chartType
The type of chart to plot.
You must use a TIME plot if you wish to plot a time variable on the X axis.
{String}
config.columnXName
Name of the column to plot on the X axis.
{String|[String]}
config.columnYName
Name of the column (or columns)
to plot on the Y axis. If multiple columns are desired, use array
format. Example: ['APXwtkg', 'APXbpsys', 'APXbpdia'].
{String}
config.containerPath
The container path in which the data for this chart is defined. If not supplied,
the current container path will be used.
{Function}
config.failure
Javascript function that can be used as a callback
if an error occurs. Otherwise, a standard listener will be used.
{Integer}
config.height
Height in pixels
- Default Value:
- '480'
{Function}
config.imageMapCallback
Javascript function that will be used in the URL's of the generated image map.
The specified function will be invoked with a single argument, a JSON object with : key, x, and y as fields. If
no function is specified, then the image map will show only tooltips.
{String|[String]}
config.imageMapCallbackColumns
Name(s) of additional columns whose names and values should be added
To the JSON object for the config.imageMapCallback function.
{Bool}
config.logX
Log scale X axis.
- Default Value:
- 'false'
{Bool}
config.logY
Log scale Y axis.
- Default Value:
- 'false'
{String}
config.queryName
Name of a query table associated with the
chosen schema. Details below. Example: The name of one of
the study demo datasets: 'Physical Exam'. See also:
How To Find schemaName, queryName & viewName.
{String}
config.renderImageMapTo
Element on the page where the imagemap will render.
{String}
config.renderTo
Element on the page where the chart will render.
{String}
config.schemaName
Name of a schema defined within the current
container. Example: 'study'. See also:
How To Find schemaName, queryName & viewName.
{Bool}
config.showLines
Show lines between symbols.
- Default Value:
- 'false'
{Bool}
config.showMultipleCharts
If multiple Y columns are specified,
display each in its own plot.
- Default Value:
- 'false'
{Bool}
config.showMultipleYAxis
If there are multiple Y axis
columns, display a separate Y axis for each column on the same plot.
This option is mutually exclusive with showMultipleCharts.
- Default Value:
- 'false'
{Bool}
config.verticalOrientation
If showMultipleCharts is 'true' this
option controls whether charts are plotted vertically or
horizontally (the default).
- Default Value:
- 'false'
{String}
config.viewName
Name of a custom view associated with the
chosen query. Details below. Example: The name of a custom
view for the 'Physical Exam' study demo dataset: 'Custom Grid
View: Join for Cohort Views'. See also:
How To Find schemaName, queryName & viewName.
{Integer}
config.width
Width in pixels
- Default Value:
- '640'
Field Detail
<static> <constant>
LABKEY.Chart.TIME
Time-based chart
<static> <constant>
LABKEY.Chart.XY
Scatterplot-type chart
Method Detail
render()
Renders the chart to the div tags as specified in the config object passed to the constructor.