CanvasXpress Constructor Arguments

var cX = new CanvasXpress(targetId, data, config, events);

Or, using a single JSON object:

var cX = new CanvasXpress({
  "renderTo": targetId,
  "data": data,
  "config": config,
  "events": events
});

Responsive Visualizations

To make visualizations responsive, use the responsive and aspectRatio attributes. The responsive attribute automatically resizes the visualization to its parent container, while aspectRatio maintains its proportions.

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <canvas id='bar1' width='290' height='540' aspectRatio='1:1' responsive='true'></canvas>
  </div>
</div>

It's important that the <canvas> element is not programmatically changed to avoid conflicts with the CanvasXpress library.

Data Components

• Sample information: Metadata for samples.
• Variable information: Metadata for variables.
• Data values: The actual data to be visualized.

var data = {
  "y": {
    "vars": ["Gene1", "Gene2", "Gene3"],
    "smps": ["Sample1", "Sample2", "Sample3"],
    "data": [[10, 20, 30], [15, 25, 35], [5, 15, 25]]
  },
  "x": {
    "Treatment": ["Control", "Control", "Treatment"]
  },
  "z": {
    "Gene1": { "Pathway": "Pathway1" },
    "Gene2": { "Pathway": "Pathway2" },
    "Gene3": { "Pathway": "Pathway1" }
  }
}

Supported File Formats

• JSON files
• CSV/TSV files
• XML files (GPML, KGML, XGMML)
• PNG/SVG image files (with embedded data)

Common Configuration Properties

• graphType - The type of visualization (e.g., 'Bar', 'Scatter2D', 'Heatmap')
• colorScheme - Color palette for data representation
• title - Title of the visualization
• subtitle - Subtitle of the visualization
• xAxisTitle - Label for the X-axis
• yAxisTitle - Label for the Y-axis

var config = {
  "graphType": "Scatter2D",
  "colorScheme": "Rainbow",
  "title": "Gene Expression Analysis"
}

For a complete list of configuration options, refer to the API documentation.

Common Events

• click - Triggered when a user clicks on an element
• dblclick - Triggered on double-click
• mouseover - Triggered when the mouse moves over an element
• mouseout - Triggered when the mouse leaves an element

var events = {
  "click": function(o, e, t) {
    console.log("Clicked on:", o);
  },
  "mouseover": function(o, e, t) {
    console.log("Mouse over:", o);
  }
}

// Get an instance by ID
var cX = CanvasXpress.$('canvasId');

// Destroy an instance
cX.destroy();

// Using document.addEventListener
document.addEventListener('DOMContentLoaded', function() {
  var cX = new CanvasXpress(...);
});