CanvasXpress a stand-alone JavaScript Library for Data Analytics. Built for the purpose of reproducible research with a sophisticated and unobtrusive user interface. Full and effortless audit trail of data, configuration and all user interactions in every visualization without any extra coding.
The canvasXpress library conists of two files: (1) a CSS file, canvasXpress.css and (2) a JavaScript file, canvasXpress.min.js. These two files must be included in section of the web page pointing directly to the www.canvasXpress.org web site:
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script type="text/javascript" src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>or downloaded and included in the section of the web page pointing to the desired location. Please contact us obtain a license.
<link rel="stylesheet" href="path-to-canvasXpress.css" type="text/css"/>
<script type="text/javascript" src="path-to-canvasXpress.min.js"></script>npm install canvasxpress
yarn add canvasxpress
CanvasXpress is a standalone JavaScript library that works in all modern browsers on mobile, tablets and desktop devices. The basic usage is very simple:
Include the JavaScript and the CSS CanvasXpress library files in the element of the web page. Include a script to handle the data, the configuration, and the constructor of the CanvasXpress object in the element of the web page. An advanced use is included in the initialization section. Include a element inside the element where the visualization will be displayed.
<html>
<head>
<!-- 1. Include the CanvasXpress library -->
<link rel="stylesheet" href="path-to-canvasXpress.css" type="text/css"/>
<script type="text/javascript" src="path-to-canvasXpress.min.js"></script>
</head>
<body>
<!-- 2. DOM element where the visualization will be displayed -->
<canvas id="canvasId" width="540" height="540"></canvas>
<!-- 3. Include script to initialize object -->
<script>
// Data
var data = { "y": {
"vars": [ "Gene1"],
"smps": [ "Smp1", "Smp2", "Smp3" ],
"data": [ [ 10, 35, 88 ] ]
}
};
// Configuration
var conf = { "graphType": "Bar" };
// Initialize object
var cX = new CanvasXpress("canvasId", data, conf);
</script>
</body>
</html>
(The two CanvasXpress files used in all repos are identical)
Install the CanvasXpress R package from CRAN and use it in the R console, R-Studio or in any Shiny application. Here is a link to the Github repo and some Shiny Examples
Install the CanvasXpress Python library from PyPI and use it with Jupyter, Flask and Django.
Install the CanvasXpress Node module from npmjs to create visualizations locally or in the cloud.
Install the CanvasXpress Node modules from npmjs to easily integrate with React JS.
CanvasXpress is free for personal and educational use. To obtain a license for comercial purposes please follow this link
Please follow this instructions replacing the Xs with your license
// Include the following HTML snippet in the head of your web pages(s)
// before the line that references the canvasXpress.min.js file.
<script>
window.cX="XXXXXXXXXXX";
</script>