Class Index | File Index

Classes


Class LABKEY.Chart

Chart class to create and render live charts and imagemaps.

Additional Documentation:


Defined in: Chart.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
LABKEY.Chart(config)
Chart class to create and render live charts and imagemaps.
Config Summary
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 Summary
Field Attributes Field Name and Description
<static> <constant>  
LABKEY.Chart.TIME
Time-based chart
<static> <constant>  
LABKEY.Chart.XY
Scatterplot-type chart
Method Summary
Method Attributes Method Name and Description
 
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.

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