Skip to content

CanvasXpress: A JavaScript Library for Data Analytics with Full Audit Trail Capabilities.

Notifications You must be signed in to change notification settings

neuhausi/canvasxpress-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 

Repository files navigation

CanvasXpress

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.

Installation

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

npm install canvasxpress

Yarn

yarn add canvasxpress

Overview

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.

Example:

<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>

Integration with other frameworks

(The two CanvasXpress files used in all repos are identical)

R Integration

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

Python Integration

Install the CanvasXpress Python library from PyPI and use it with Jupyter, Flask and Django.

Node Integration

Install the CanvasXpress Node module from npmjs to create visualizations locally or in the cloud.

React Integration

Install the CanvasXpress Node modules from npmjs to easily integrate with React JS.

License

CanvasXpress is free for personal and educational use. To obtain a license for comercial purposes please follow this link

How to hide the CanvasXpress watermark

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>

For more information about CanvasXpress visit our wbe page at https://www.canvasxpress.org