### Initialize ConfigurationObject
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Example configuration object for a heatmap visualization.
```javascript
var config = {
graphType: "Heatmap",
title: "Gene Expression Matrix",
theme: "minimal",
width: 800,
height: 600,
responsive: true,
aspectRatio: 1.33,
showLegend: true,
broadcast: true
};
```
--------------------------------
### Install via Package Managers
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/README.md
Use npm or yarn to add the library to your project dependencies.
```bash
npm install canvasxpress
```
```bash
yarn add canvasxpress
```
--------------------------------
### Complete Usage Example
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Demonstrates global configuration, instance management, remote data loading, and cleanup procedures.
```javascript
// Check capabilities
console.log("Graph types available:", CanvasXpress.graphTypes.length);
// Set global defaults
CanvasXpress.config = {
theme: "minimal",
responsive: true,
showLegend: true
};
// Create multiple visualizations
var cX1 = new CanvasXpress("chart1", data1, { graphType: "Bar" });
var cX2 = new CanvasXpress("chart2", data2, { graphType: "Heatmap" });
var cX3 = new CanvasXpress("chart3", data3, { graphType: "Scatter2D" });
// Access all instances
for (var id in CanvasXpress.instances) {
var instance = CanvasXpress.instances[id];
console.log(id + ":", instance.getType());
}
// Retrieve specific instance
var chart = CanvasXpress.$("chart1");
chart.setConfig({ graphType: "Line" });
// Load remote data
CanvasXpress.loadRemoteData("data.csv", function(data, error) {
if (!error) {
var cX4 = new CanvasXpress("chart4", data, {
graphType: CanvasXpress.graphTypes[0]
});
}
});
// Clean up all visualizations
CanvasXpress.destroy();
```
--------------------------------
### Example: Initialize and Switch Data
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Demonstrates creating an instance and using init to load or switch visualization data.
```javascript
// Create empty instance
var cX = new CanvasXpress("canvas");
// Initialize later
cX.init(data1, config1);
// Switch to different data
cX.init(data2, config2);
```
--------------------------------
### Example: Add Event Listeners
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Demonstrates registering multiple event handlers for different interaction types.
```javascript
function clickHandler(dataObject, event, cx) {
console.log("Clicked:", dataObject);
}
cX.addEventListener("click", clickHandler);
// Add multiple handlers
cX.addEventListener("mouseover", function(d, e, cx) {
console.log("Hovering:", d);
});
cX.addEventListener("mouseout", function(d, e, cx) {
console.log("Left element");
});
```
--------------------------------
### Example: Destroy Instance
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Demonstrates cleaning up an instance; note that the instance becomes unusable after this call.
```javascript
cX.destroy();
// cX is no longer usable
// To create new visualization, instantiate new CanvasXpress object
```
--------------------------------
### Handle EventDataObject examples
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Examples of event data objects for different chart types.
```javascript
// For Heatmap click
{
row: 5,
column: 3,
variable: "Gene1",
sample: "Sample5",
value: 42.5
}
// For Bar chart click
{
sample: "Sample2",
variable: "Gene1",
value: 35.7
}
// For Scatter plot click
{
sample: "S1",
variable: "Gene1",
value1: 2.5,
value2: 3.1
}
```
--------------------------------
### Configure Data Transposition
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Example for swapping variables and samples at load time.
```javascript
{
graphType: "Bar",
transposeData: true // Genes become samples, samples become genes
}
```
--------------------------------
### Get Samples with getSamples()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Retrieves the array of sample names from the instance.
```javascript
var sampleArray = canvasXpressInstance.getSamples()
```
```javascript
var samples = cX.getSamples();
console.log("Total samples:", samples.length);
console.log("First sample:", samples[0]);
```
```javascript
["Sample1", "Sample2", "Sample3", "Sample4", "Sample5"]
```
--------------------------------
### Configure Visualization Options
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Example of the configuration object used to define chart appearance and behavior.
```javascript
{
graphType: "Heatmap", // Required: visualization type
title: "Chart Title", // Display title
theme: "minimal", // Visual style
responsive: true, // Scale with container
broadcast: true, // Enable linking
// ... 100+ more properties
}
```
--------------------------------
### Initialize CanvasXpress Heatmap
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
A complete example demonstrating data structure, configuration, event listeners, and chart initialization.
```html
CanvasXpress Example
```
--------------------------------
### Configure Data Aggregation
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Examples for setting summary types and grouping factors to aggregate data.
```javascript
{
graphType: "Bar",
summaryType: "mean",
groupingFactors: ["treatment", "tissue"] // Group by these
}
```
```javascript
{
graphType: "Bar",
groupingFactors: ["treatment"],
summaryType: "mean"
}
```
--------------------------------
### Initialize CanvasXpressData object
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Example of a populated data object with numerical matrix and sample/variable metadata.
```javascript
var data = {
y: {
data: [
[2.5, 3.1, 2.8],
[5.2, 4.9, 5.1],
[1.1, 1.3, 1.2]
],
vars: ["Gene1", "Gene2", "Gene3"],
smps: ["S1", "S2", "S3"]
},
x: {
S1: { treatment: "control", replicate: 1 },
S2: { treatment: "drug_A", replicate: 1 },
S3: { treatment: "drug_B", replicate: 1 }
},
z: {
Gene1: { chromosome: "chr1", biotype: "protein" },
Gene2: { chromosome: "chr2", biotype: "protein" },
Gene3: { chromosome: "chr3", biotype: "lncRNA" }
}
};
```
--------------------------------
### Define dataObject Structures
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Example metadata structures returned by different graph types.
```javascript
{
row: 5,
column: 3,
variable: "Gene1",
sample: "Sample5",
value: 42.5
}
```
```javascript
{
sample: "Sample2",
variable: "Gene1",
value: 35.7
}
```
```javascript
{
sample: "S1",
variable: "Gene1",
value1: 2.5, // X axis value
value2: 3.1, // Y axis value
value3: 1.8 // Z axis value (if 3D)
}
```
--------------------------------
### Example: Remove Event Listener
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Demonstrates removing a previously registered handler using its function reference.
```javascript
var myClickHandler = function(d, e, cx) {
console.log("Clicked");
};
cX.addEventListener("click", myClickHandler);
// Later: remove the handler
cX.removeEventListener("click", myClickHandler);
```
--------------------------------
### Get Variables with getVars()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Alias for the getVariables method.
```javascript
var variableArray = canvasXpressInstance.getVars()
```
--------------------------------
### Get Variables with getVariables()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Retrieves the array of variable names from the instance.
```javascript
var variableArray = canvasXpressInstance.getVariables()
```
```javascript
var vars = cX.getVariables();
console.log("Total variables:", vars.length);
vars.forEach(function(v) {
console.log("Variable:", v);
});
```
```javascript
["Gene1", "Gene2", "Gene3"]
```
--------------------------------
### Configure Sample Name Visibility
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Use showSampleNames to toggle sample labels and smpLabelInterval to control label frequency.
```javascript
{
graphType: "Bar",
showSampleNames: true,
smpLabelInterval: 2 // Show every 2nd label
}
```
--------------------------------
### Get Graph Type with getType()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Retrieves the current graph type configuration.
```javascript
var graphType = canvasXpressInstance.getType()
```
```javascript
var type = cX.getType();
if (type === "Heatmap") {
console.log("Displaying heatmap");
}
```
```javascript
"Bar", "Line", "Area", "Scatter2D", "Scatter3D", "Heatmap", "Boxplot", "Pie", etc.
```
--------------------------------
### init(data, config, events)
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Initializes or re-initializes the visualization with new parameters, data, and event handlers.
```APIDOC
## init(data, config, events)
### Description
Re-initializes the visualization. Used to load completely new data or reset to default state. Internally calls draw().
### Parameters
- **data** (object | string) - Required - Visualization data (same format as constructor).
- **config** (object) - Required - Configuration object (must include graphType).
- **events** (object) - Optional - Event handlers object.
### Return Type
void (undefined)
### Example
```javascript
var cX = new CanvasXpress("canvas");
cX.init(data1, config1);
cX.init(data2, config2);
```
```
--------------------------------
### Deferred Initialization
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Create an empty instance first and call the init method later to populate the chart.
```javascript
// Create empty instance
var cX = new CanvasXpress("canvas");
// Initialize later
cX.init(data, config, events);
```
--------------------------------
### Configure sample metadata
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Assign key-value pairs to the data.x object to define sample attributes.
```javascript
data.x = {
Sample1: {
treatment: "control",
tissue: "liver",
replicate: 1,
patientID: "P001"
},
Sample2: {
treatment: "drug_A",
tissue: "brain",
replicate: 2,
patientID: "P002"
}
};
```
--------------------------------
### Initialize with Object Literal
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Creates a new instance using an object literal to map configuration properties, which is useful for readability.
```javascript
var cX = new CanvasXpress({
renderTo: elementId, // required: string
data: data, // required: object|string|function
config: config, // required: object
events: events // optional: object
});
```
--------------------------------
### getInstance.getSamples()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Returns an array of sample names.
```APIDOC
## getInstance.getSamples()
### Description
Retrieves the list of sample names currently in the instance.
### Returns
- **Array** (string[]) - List of sample names.
```
--------------------------------
### Configure Global Settings
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Set global defaults or register callbacks for when the library is ready.
```javascript
CanvasXpress.config = {...} // Set global defaults
CanvasXpress.ready(callback) // Register ready callback
CanvasXpress.onReady(callback) // Alias for ready()
```
--------------------------------
### Configuration
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Global configuration and lifecycle hooks.
```APIDOC
## CanvasXpress Configuration
### Properties
- **CanvasXpress.config**: Object used to set global defaults.
### Methods
- **CanvasXpress.ready(callback)**: Registers a callback to execute when the library is ready.
- **CanvasXpress.onReady(callback)**: Alias for ready().
```
--------------------------------
### Configure License Watermark
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/README.md
Set the global window.cX variable before loading the library to hide the watermark.
```html
// Include the following HTML snippet in the head of your web pages(s)
// before the line that references the canvasXpress.min.js file.
```
--------------------------------
### Get Data with getData()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Retrieves the current data object. Modifications require calling update() to reflect changes.
```javascript
var dataObject = canvasXpressInstance.getData()
```
```javascript
{
y: {
data: [[...], [...], ...],
vars: ["var1", "var2"],
smps: ["smp1", "smp2"]
},
x: {
smp1: { attribute: value },
smp2: { attribute: value }
},
z: {
var1: { attribute: value },
var2: { attribute: value }
}
}
```
```javascript
var data = cX.getData();
var firstValue = data.y.data[0][0];
console.log("First data point:", firstValue);
// Modify data
data.y.data[0][0] = 99;
cX.update(); // Apply changes
```
--------------------------------
### Configure Dumbbell Comparison Chart
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Sets the graph type to Dumbbell. Used for comparing paired values such as start and end points.
```javascript
config = { graphType: "Dumbbell" }
```
```javascript
{
y: {
data: [
[value1_start...],
[value1_end...],
[value2_start...],
[value2_end...]
],
vars: ["var1_start", "var1_end", "var2_start", "var2_end"],
smps: ["item1", "item2"]
}
}
```
--------------------------------
### Configure smpTextColor
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Sets the CSS color for sample name text.
```javascript
{
graphType: "Bar",
smpTextColor: "rgb(100,100,100)"
}
```
--------------------------------
### Network Configuration Options
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Specific options for customizing network visualization.
```javascript
{
networkType: "force", // force|hierarchy|circular
networkNodeSize: 20, // Node size in pixels
networkNodeColor: "red", // Node color
networkNodeOutlineWidth: 2, // Border width
networkLinkColor: "gray", // Link/edge color
networkLinkWidth: 1 // Link thickness
}
```
--------------------------------
### Initialize CanvasXpress Visualization
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/README.md
Full HTML structure including the required canvas element and the JavaScript initialization logic.
```html
```
--------------------------------
### Initialize with Positional Arguments
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Creates a new instance by passing the canvas ID, data, configuration, and event handlers as ordered arguments.
```javascript
var cX = new CanvasXpress(elementId, data, config, events);
```
--------------------------------
### CanvasXpress.init
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Method for deferred initialization of a CanvasXpress instance.
```APIDOC
## cX.init(data, config, events)
### Description
Initializes a previously created empty CanvasXpress instance with data, configuration, and event handlers.
### Parameters
- **data** (object) - The data to visualize.
- **config** (object) - Configuration options.
- **events** (object) - Event handlers.
### Usage Example
```javascript
var cX = new CanvasXpress("canvas");
cX.init(data, config, events);
```
```
--------------------------------
### CanvasXpress.onReady()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Schedules a callback to run when the CanvasXpress library is fully initialized.
```APIDOC
## CanvasXpress.onReady(callback)
### Description
Schedules a callback to run when CanvasXpress is fully initialized.
### Parameters
- **callback** (function) - Required - Function to execute when library is ready.
### Return Type
void (undefined)
```
--------------------------------
### getSamples()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Retrieves the array of sample names from the instance.
```APIDOC
## getSamples()
### Description
Returns the list of sample names from `data.y.smps`.
### Signature
`canvasXpressInstance.getSamples()`
### Returns
- **Array** (string[]) - An array of sample names.
```
--------------------------------
### Register library ready callback
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Defines or registers a callback function to execute once the library is fully initialized.
```javascript
CanvasXpress.ready = function(callback) {
// callback executed when library is ready
}
```
```javascript
CanvasXpress.ready(function() {
console.log("CanvasXpress is ready!");
// Safe to create visualizations now
var cX = new CanvasXpress("canvas", data, config);
});
```
```javascript
CanvasXpress.onReady(callback)
```
```javascript
CanvasXpress.onReady(function() {
console.log("Safe to use CanvasXpress");
});
```
--------------------------------
### Implement Selection Highlighting
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Use click and mouseout events to trigger sample selection or clear selections.
```javascript
var events = {
click: function(d, e, cx) {
if (d.sample) {
cx.selectSamples([d.sample]);
}
},
mouseout: function(d, e, cx) {
cx.deselectAll();
}
};
```
--------------------------------
### Initialize with Event Handlers
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Pass an events object to the constructor to handle user interactions like clicks or mouseovers.
```javascript
var events = {
click: function(dataObject, event, canvasXpressInstance) {
console.log("Clicked sample:", dataObject.sample);
console.log("Variable:", dataObject.variable);
console.log("Value:", dataObject.value);
},
mouseover: function(dataObject, event, canvasXpressInstance) {
console.log("Hovering over:", dataObject.sample);
}
};
var cX = new CanvasXpress("barChart", data, config, events);
```
--------------------------------
### Accessing Prebuilt Map Definitions
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Retrieves predefined map layers and geographic data.
```javascript
var mapDefs = CanvasXpress.maps
```
--------------------------------
### Initialize with Empty Constructor
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Initializes the instance with only the target element ID, requiring a subsequent call to the init method to provide data and configuration.
```javascript
var cX = new CanvasXpress(elementId);
// Then call: cX.init(data, config, events)
```
--------------------------------
### Interact with CanvasXpress Instance
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Demonstrates using the instance reference to modify configuration and selection state.
```javascript
var handler = function(dataObject, event, cx) {
// Change graph type on click
var currentType = cx.getType();
var newType = currentType === "Bar" ? "Heatmap" : "Bar";
cx.setConfig({ graphType: newType });
// Select the clicked sample
if (dataObject.sample) {
cx.selectSamples([dataObject.sample]);
}
};
```
--------------------------------
### Gantt
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Configures a Gantt chart for project timelines.
```APIDOC
## Gantt
### Description
Gantt/timeline chart for project schedules.
### Configuration
```javascript
config = { graphType: "Gantt" }
```
```
--------------------------------
### Initialize CanvasXpress Instance
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Method signature for initializing or re-initializing a visualization instance.
```javascript
canvasXpressInstance.init(data, config, events)
```
--------------------------------
### CanvasXpress Instance Lifecycle and Manipulation
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Demonstrates the full lifecycle of a CanvasXpress instance including initialization, data modification, configuration updates, and cleanup.
```javascript
// Initialize
var cX = new CanvasXpress({
renderTo: "canvas",
data: {
y: {
data: [[10, 20, 30], [40, 50, 60]],
vars: ["Gene1", "Gene2"],
smps: ["S1", "S2", "S3"]
}
},
config: {
graphType: "Bar",
title: "Initial Bar Chart"
}
});
// Inspect data
console.log("Samples:", cX.getSamples()); // ["S1", "S2", "S3"]
console.log("Variables:", cX.getVariables()); // ["Gene1", "Gene2"]
console.log("Type:", cX.getType()); // "Bar"
// Modify configuration
cX.setConfig({
graphType: "Heatmap",
title: "Heatmap View",
theme: "minimal"
});
// Work with data
var data = cX.getData();
data.y.data[0][0] = 99; // Modify value
cX.update(); // Apply changes
// Selection
cX.selectSamples(["S1", "S2"]);
setTimeout(function() {
cX.deselectAll();
}, 2000);
// Add event handler
cX.addEventListener("click", function(d, e, cx) {
console.log("Clicked sample: " + d.sample);
});
// Cleanup when done
setTimeout(function() {
cX.destroy();
console.log("Visualization removed");
}, 5000);
```
--------------------------------
### new CanvasXpress(elementId, data, config, events)
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/INDEX.md
The constructor initializes a new CanvasXpress instance, supporting both positional and object-based parameter configurations.
```APIDOC
## new CanvasXpress(elementId, data, config, events)
### Description
Initializes a new CanvasXpress visualization instance. Supports deferred initialization and various configuration patterns.
### Parameters
- **elementId** (string) - Required - The ID of the DOM element to render the visualization into.
- **data** (object) - Optional - The data object for the visualization.
- **config** (object) - Optional - Configuration settings for the visualization.
- **events** (object) - Optional - Event handlers for the visualization instance.
```
--------------------------------
### Manage Colors and Themes
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Access built-in color palettes, theme definitions, color maps, and font configurations.
```javascript
CanvasXpress.colorSchemes // Available color palettes
CanvasXpress.THEMES // Theme definitions
CanvasXpress.colorNames // Named color map
CanvasXpress.fonts // Available fonts
```
--------------------------------
### Implement Keyboard Shortcuts
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Handle keydown events to trigger custom logic based on modifier keys and specific key codes.
```javascript
var events = {
keydown: function(d, e, cx) {
if (e.ctrlKey || e.metaKey) {
switch(e.key.toLowerCase()) {
case 's':
e.preventDefault();
// Save custom logic
break;
case 'z':
e.preventDefault();
// Undo custom logic
break;
case 'y':
e.preventDefault();
// Redo custom logic
break;
}
}
}
};
```
--------------------------------
### Include CanvasXpress via CDN
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/README.md
Load the library directly from the official website using script and link tags in the document head.
```html
```
```html
```
--------------------------------
### getInstance.getVariables() / getInstance.getVars()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Returns an array of variable names.
```APIDOC
## getInstance.getVariables()
### Description
Retrieves the list of variable names currently in the instance.
### Returns
- **Array** (string[]) - List of variable names.
```
--------------------------------
### Initialize a Basic Bar Chart
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Requires a canvas element in the DOM and defined data and configuration objects.
```javascript
// HTML
// JavaScript
var data = {
y: {
data: [[10, 35, 88]],
vars: ["Gene1"],
smps: ["Sample1", "Sample2", "Sample3"]
}
};
var config = {
graphType: "Bar",
title: "Expression Levels"
};
var cX = new CanvasXpress("barChart", data, config);
```
--------------------------------
### Dynamic Data Loading
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Use a function as the data argument to generate data dynamically at initialization.
```javascript
var data = function() {
return {
y: {
data: [[Math.random() * 100]],
vars: ["RandomValue"],
smps: ["Sample1"]
}
};
};
var cX = new CanvasXpress("chart", data, { graphType: "Bar" });
```
--------------------------------
### Pie Chart Configuration Options
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Specific configuration parameters for customizing Pie chart layout and labels.
```javascript
{
pieType: "pie", // pie|doughnut
pieHole: 0.4, // Doughnut hole size (0-1)
pieStartAngle: 0, // Starting angle in degrees
showDataLabels: true // Show percentage labels
}
```
--------------------------------
### Broadcasting and Linking
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Configuration properties for enabling and grouping cross-visualization selection broadcasting.
```APIDOC
## Broadcasting Properties
### broadcast
- **Type**: boolean
- **Default**: true
- **Description**: If true, selections sync across linked visualizations.
### broadcastGroup
- **Type**: string
- **Default**: —
- **Description**: Identifier for linked visualization group. Visualizations with the same group name will sync selections.
```
--------------------------------
### Implement an event handler
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Register a callback function via the constructor events parameter.
```javascript
var clickHandler = function(dataObject, event, canvasXpressInstance) {
console.log("Element clicked:", dataObject);
console.log("Mouse position:", event.clientX, event.clientY);
console.log("Graph type:", canvasXpressInstance.getType());
};
var cX = new CanvasXpress("canvas", data, config, {
click: clickHandler
});
```
--------------------------------
### getInstance.getConfig()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Returns the current configuration object of the CanvasXpress instance.
```APIDOC
## getInstance.getConfig()
### Description
Retrieves the current configuration settings applied to the CanvasXpress instance.
### Returns
- **graphType** (string) - The type of graph.
- **title** (string, optional) - The title of the graph.
- **theme** (string, optional) - The theme applied.
- **width** (number, optional) - The width of the graph.
- **height** (number, optional) - The height of the graph.
- **responsive** (boolean, optional) - Whether the graph is responsive.
```
--------------------------------
### CanvasXpress Constructor
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
The main constructor for initializing a CanvasXpress visualization instance.
```APIDOC
## new CanvasXpress(target, data, config, events)
### Description
Initializes a new CanvasXpress instance to render a chart on a specified canvas element.
### Parameters
- **target** (string|object) - The ID of the canvas element or an object literal containing configuration properties.
- **data** (object|string|function) - The data object, a URL to a remote data source, or a function returning data.
- **config** (object) - Configuration options for the chart.
- **events** (object) - Event handler functions (e.g., click, mouseover).
### Usage Example
```javascript
var cX = new CanvasXpress("barChart", data, config, events);
```
```
--------------------------------
### Configure Visualization Title
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Sets the main text displayed above the visualization.
```javascript
{
graphType: "Bar",
title: "Gene Expression Profile"
}
```
--------------------------------
### Instance Management
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Methods and properties for managing CanvasXpress instances.
```APIDOC
## CanvasXpress Instance Management
### Methods
- **CanvasXpress.$(canvasId)**: Retrieves a specific instance by ID.
- **CanvasXpress.getObject(id)**: Alias for $().
- **CanvasXpress.destroy()**: Destroys all active instances.
### Properties
- **CanvasXpress.instances**: Registry containing all active instances.
```
--------------------------------
### Initialize Basic CanvasXpress Visualization
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Defines the required data structure and configuration object to render a chart on a canvas element.
```javascript
// 1. Create data
var data = {
y: {
data: [[10, 20, 30], [40, 50, 60]],
vars: ["Gene1", "Gene2"],
smps: ["Sample1", "Sample2", "Sample3"]
}
};
// 2. Create configuration
var config = {
graphType: "Bar",
title: "My Chart"
};
// 3. Initialize visualization
var cX = new CanvasXpress("myCanvas", data, config);
```
--------------------------------
### Line Chart Configuration Options
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Specific configuration parameters for customizing Line chart styles and data point visibility.
```javascript
{
lineType: "normal", // normal|spline|step
lineStyle: "solid", // solid|dashed|dotted
lineWidth: 2, // Line thickness
showDataPoints: true // Show dots at data points
}
```
--------------------------------
### Implement Data Export on Click
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Extract chart data and configuration to send to a server endpoint via fetch when an element is clicked.
```javascript
var events = {
click: function(d, e, cx) {
var data = cx.getData();
var config = cx.getConfig();
var exportData = {
clicked: d,
currentConfig: config,
allData: data,
timestamp: new Date().toISOString()
};
console.log("Exporting:", exportData);
// Send to server
fetch("/api/events", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(exportData)
});
}
};
```
--------------------------------
### Define ToolbarSizes
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Defines available size configurations for the toolbar.
```typescript
type ToolbarSizes =
| "small"
| "medium"
| "large"
```
--------------------------------
### Enable Responsive Sizing
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Enables the canvas to scale automatically to fit its container.
```javascript
{
graphType: "Bar",
responsive: true
}
```
--------------------------------
### Configure smpHighlightColor
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Sets the CSS color for highlighted sample elements in the visualization.
```javascript
{
graphType: "Bar",
smpHighlightColor: "#FF0000" // Red highlight
}
```
--------------------------------
### Access Supported Graph Types
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Retrieves the list of all supported visualization types and demonstrates how to check for specific support.
```javascript
var types = CanvasXpress.graphTypes
```
```javascript
if (CanvasXpress.graphTypes.includes("Heatmap")) {
console.log("Heatmap is supported");
}
console.log("Available types:", CanvasXpress.graphTypes.length);
// Output: Available types: 55
```
```javascript
[
"Area",
"Bar",
"Boxplot",
"Chord",
"CircularPlot",
"Contour",
"Correlation",
"DensityPlot",
"Dendrogram",
"Doughnut",
"Dotplot",
"DownsetPlot",
"Dumbbell",
"Fish",
"Gantt",
"GenomeBrowser",
"Heatmap",
"Histogram",
"KaplanMeier",
"Line",
"ManhattanPlot",
// ... and 35+ more
]
```
--------------------------------
### Add Event Listener
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Method signature for registering a dynamic event handler.
```javascript
canvasXpressInstance.addEventListener(eventType, handlerFunction)
```
--------------------------------
### Render visualization with draw()
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Triggers a full render of the visualization based on current data and configuration.
```javascript
canvasXpressInstance.draw()
```
```javascript
var cX = new CanvasXpress("canvas", data, config);
cX.draw(); // Manually trigger rendering
```
--------------------------------
### Configure Heatmap Properties
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Settings for heatmap cell borders, highlighting, and color scaling.
```javascript
{
graphType: "Heatmap",
heatmapCellBox: true, // Show cell borders
heatmapCellBoxColor: "rgb(102,102,102)", // Border color
heatmapCellBoxWidth: 1, // Border width
heatmapAutoAdjust: true, // Rescale on zoom
heatmapHighlightByRowCol: false, // Highlight row/col
heatmapHighlightByRowColIntersection: false, // Highlight intersection
heatmapCollapse: false, // Remove outlines
colorMin: null, // Min color scale
colorMax: null // Max color scale
}
```
--------------------------------
### Static Methods
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/INDEX.md
Global utility methods and properties provided by the CanvasXpress library.
```APIDOC
## Static Methods
### Description
Global utilities for instance management, data processing, and resource loading.
### Methods
- **Instance Registry**: $(), getObject(), instances
- **Configuration**: config, onReady()
- **Graph Info**: graphTypes, graphTypeDatasets
- **Data Utilities**: csv(), melt(), pivot(), stack()
- **Remote Loading**: loadRemoteData(), loadTopoJSON(), loadScripts()
- **Resources**: colorSchemes, THEMES, fonts, chromosomes
```
--------------------------------
### Instance Methods
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/INDEX.md
Methods available on a CanvasXpress instance for controlling rendering, configuration, data, selection, and lifecycle.
```APIDOC
## Instance Methods
### Description
Methods used to interact with an existing CanvasXpress instance.
### Methods
- **Rendering**: draw(), update(), redraw(), resetCanvas()
- **Configuration**: getConfig(), setConfig()
- **Data**: getData(), getSamples(), getVariables(), getType()
- **Selection**: selectSamples(), deselectAll(), filterSamples()
- **Lifecycle**: init(), destroy()
- **Events**: addEventListener(), removeEventListener()
```
--------------------------------
### Configure TagCloud Visualization
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Sets the graph type to TagCloud and defines the required data structure for word frequency visualization.
```javascript
config = { graphType: "TagCloud" }
```
```javascript
{
y: {
data: [[frequency...]],
vars: ["word1", "word2"],
smps: ["counts"]
}
}
```
--------------------------------
### Enable Selection Broadcasting
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Enable cross-visualization selection synchronization using the broadcast property.
```javascript
{
graphType: "Bar",
broadcast: true,
broadcastGroup: "linked_charts_1"
}
```
--------------------------------
### Accessing Action Catalog
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Retrieves the catalog defining all interactive actions available to users.
```javascript
var actions = CanvasXpress.ACTION_CATALOG
```
--------------------------------
### Manage CanvasXpress Instances
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Methods for creating, retrieving, and iterating over active CanvasXpress instances.
```javascript
// Create
var cX = new CanvasXpress("canvasId", data, config);
// Retrieve
var sameInstance = CanvasXpress.$("canvasId");
// List all
for (var id in CanvasXpress.instances) {
var instance = CanvasXpress.instances[id];
console.log(id, instance.getType());
}
```
--------------------------------
### Configure Visualization Subtitle
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Adds smaller text displayed directly under the main title.
```javascript
{
graphType: "Bar",
title: "Expression Data",
subtitle: "Control vs Treatment Groups"
}
```
--------------------------------
### Configuration Object
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
Defines the required and optional properties for configuring a CanvasXpress visualization.
```APIDOC
## Configuration Object
### Description
The configuration object defines the visual behavior and properties of the chart.
### Required Properties
- **graphType** (string) - Required - One of 50+ supported visualization types (e.g., "Bar").
### Common Properties
- **title** (string) - Optional - Display title for the visualization.
- **theme** (string) - Optional - Color theme (e.g., "minimal", "void0", "economist", "ggplot2").
- **width** (number) - Optional - Canvas width in pixels.
- **height** (number) - Optional - Canvas height in pixels.
- **responsive** (boolean) - Optional - Enable responsive resizing with container.
- **aspectRatio** (number) - Optional - Width:height ratio for responsive layouts.
- **showLegend** (boolean) - Optional - Display legend.
- **broadcast** (boolean) - Optional - Enable cross-visualization selection broadcast.
```
--------------------------------
### Manage CanvasXpress Instances
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/README.md
Use these methods to retrieve, list, or destroy existing chart instances.
```javascript
CanvasXpress.$("canvasId") // Get instance
CanvasXpress.getObject("id") // Alias for $()
CanvasXpress.instances // Registry of all instances
CanvasXpress.destroy() // Destroy all instances
```
--------------------------------
### keyup
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Triggered when a keyboard key is released.
```APIDOC
## keyup
### Description
Triggered when keyboard key is released.
### Signature
`keyup: function(dataObject, event, canvasXpressInstance)`
```
--------------------------------
### Define ConfigurationObject structure
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/types.md
Core configuration properties available for all graph types, including display, responsive, and interaction settings.
```typescript
{
graphType: string // Required: one of 50+ types
// Display
title?: string
subtitle?: string
theme?: string
width?: number
height?: number
margin?: {
left: number
right: number
top: number
bottom: number
}
// Responsive
responsive?: boolean // Default: false
aspectRatio?: number
resizable?: boolean
resizableX?: boolean
resizableY?: boolean
// Legend and axes
showLegend?: boolean // Default: true
showXAxis?: boolean
showYAxis?: boolean
showXAxisLabels?: boolean
showYAxisLabels?: boolean
// Broadcasting
broadcast?: boolean // Default: true
broadcastGroup?: string
// Interaction
disableCanvas?: boolean // Default: false
disableDrag?: boolean
disableWheel?: boolean
disableEvents?: boolean
disableKeys?: boolean
disableToolbar?: boolean
disableMenu?: boolean
disableDataTable?: boolean
disableDataFilters?: boolean
disableTooltipCallout?: boolean
// Timing
infoTimeIn?: number // Milliseconds
infoTimeOut?: number // Milliseconds
// Toolbar
toolbarItems?: string[]
toolbarCodes?: string[]
toolbarFonts?: string[]
toolbarSchemes?: string[]
toolbarSize?: "small" | "medium" | "large"
toolbarType?: "top" | "left" | "right" | "bottom"
// Colors and styling
[key: string]: any // Graph type specific properties
}
```
--------------------------------
### Configure Bar Graph Properties
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/configuration.md
Settings for customizing bar graph appearance and grouping.
```javascript
{
graphType: "Bar",
barType: "normal", // normal|lollipop|arrow|bullet|etc.
barZero: true, // Force zero baseline
stacked: false, // Stack bars
grouping: "treatment" // Group from data.x
}
```
--------------------------------
### Implement Custom Tooltips
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/events.md
Manipulate DOM elements based on mouseover and mouseout events to display custom tooltip content.
```javascript
var events = {
mouseover: function(d, e, cx) {
// Create custom tooltip
var tooltip = document.getElementById("tooltip");
tooltip.style.left = (e.clientX + 10) + "px";
tooltip.style.top = (e.clientY + 10) + "px";
var content = "Sample: " + d.sample + " ";
content += "Gene: " + d.variable + " ";
content += "Value: " + d.value.toFixed(2);
tooltip.innerHTML = content;
tooltip.style.display = "block";
},
mouseout: function(d, e, cx) {
document.getElementById("tooltip").style.display = "none";
}
};
```
--------------------------------
### Sankey Configuration Options
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Specific options for customizing Sankey flow diagrams.
```javascript
{
sankeyNodeWidth: 10,
sankeyNodePadding: 40,
sankeyAlignment: "left" // left|right|center|justify
}
```
--------------------------------
### Heatmap Configuration Options
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/graph-types.md
Specific options for customizing heatmap appearance and behavior.
```javascript
{
heatmapCellBox: true, // Show cell borders
heatmapCellBoxColor: "rgb(102,102,102)", // Border color
heatmapCellBoxWidth: 1, // Border width
heatmapAutoAdjust: true, // Rescale on zoom
heatmapHighlightByRowCol: false, // Highlight row/col on hover
heatmapHighlightByRowColIntersection: false, // Highlight intersection
colorScheme: "RdBu", // Color palette
colorMin: null, // Manual min value
colorMax: null // Manual max value
}
```
--------------------------------
### Update Configuration Object
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-instance-methods.md
Merge a partial or complete configuration object into the current instance and trigger a re-render.
```javascript
canvasXpressInstance.setConfig(configObject)
```
```javascript
// Change graph type
cX.setConfig({ graphType: "Scatter2D" });
// Update multiple properties
cX.setConfig({
title: "New Title",
theme: "ggplot",
showLegend: false
});
// Add/override theme properties
cX.setConfig({
smpTextColor: "red",
varTextColor: "blue"
});
```
--------------------------------
### CanvasXpress.config
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-static-methods.md
Global configuration object that defines default settings applied to all new CanvasXpress instances. These defaults can be overridden during instance initialization.
```APIDOC
## CanvasXpress.config
### Description
Global default configuration applied to all new instances. Can be overridden per-instance.
### Type
Object
### Example
```javascript
// Set global defaults
CanvasXpress.config = {
theme: "ggplot",
responsive: true,
showLegend: true,
infoTimeOut: 5000
};
```
```
--------------------------------
### CanvasXpress Constructor
Source: https://github.com/neuhausi/canvasxpress-js/blob/master/_autodocs/api-reference/canvasxpress-constructor.md
The CanvasXpress constructor creates a new visualization instance. It can be invoked using positional arguments, an object literal, or via empty initialization followed by an init call.
```APIDOC
## CanvasXpress Constructor
### Description
Initializes a new CanvasXpress visualization instance on a target DOM element.
### Signatures
- `new CanvasXpress(elementId, data, config, events)`
- `new CanvasXpress({ renderTo, data, config, events })`
- `new CanvasXpress(elementId)` (followed by `cX.init(data, config, events)`)
### Parameters
- **renderTo / elementId** (string) - Required - DOM ID of the