CanvasXpress: Overview

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 <head> element of the web page.
Include a script to handle the data, the configuration, and the constructor of the CanvasXpress object in the <head> element of the web page. An advanced use is included in the initialization section.
Include a <canvas> element inside the <body> 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>

You can copy the snippet above to an .html file on your computer and open it in your browser to display a live bar graph like the one below.

# Python

This is a simple example with Python using Flask. For a more detailed information install the CanvasXpress Python library from PyPI and use it with Jupyter, Flask and Django. (contributed by Dr. Todd C. Brett).

This is the python file (bar.py):

import json

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def get_canvasxpress_js_chart():

  ## Data
  data = {
    "y" : {
      "vars": [ "Gene1" ],
      "smps": [ "Smp1", "Smp2", "Smp3" ],
      "data": [ [ 10, 35, 88 ] ]
    }
  }

  # CanvasXpress definitions are expressed as JSON
  cx_object_def = {
    "renderTo": "canvasId",
    "data": data,
    "config": {
      "graphType": "Bar"
    }
  }

  # Get JS and HTML data, then send it embedded in the template HTML
  return render_template(
    'bar.html',
    bar_graph=f"new CanvasXpress({json.dumps(cx_object_def)});"
  )

if __name__ == '__main__':
  app.run(debug=True)

and this is the template file (bar.html):

<html>

  <head>

    <meta charset="UTF-8">
    <title>Flask CanvasXpress Example</title>

  </head>

  <body>

    <!-- 1. DOM element where the visualization will be displayed -->
    <canvas id='canvasId' width='540' height='540'></canvas>

    <!-- 2. Include the CanvasXpress library -->
    <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>

    <!-- 3. Include script to initialize object -->
    <script type="text/javascript">
      {{ bar_graph | safe }}
    </script>

  </body>

</html>

# PHP

This is a simple example with PHP

<?php
$cx = array (
  "renderTo" => "canvasId",
  "data" => array (
    "y" => array (
      "vars" => array ( "Gene1" ),
      "smps" => array ( "Smps1", "Smp2", "Smp3" ),
      "data" => array ( array ( 10, 35, 88 ) )
    ),
  ),
  "config" => array ( "graphType" => "Bar" )
);
?>
<html>

  <head>

    <meta charset="UTF-8">
    <title>PHP CanvasXpress Example</title>

  </head>

  <body>

    <!-- 1. DOM element where the visualization will be displayed -->
    <canvas id='canvasId' width='540' height='540'></canvas>

    <!-- 2. Include the CanvasXpress library -->
    <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>

    <!-- 3. Include script to initialize object -->
    <script type="text/javascript">
      var cX = new CanvasXpress( <?php echo json_encode($cx, JSON_NUMERIC_CHECK); ?>)
    </script>

  </body>

</html>

Getting Started

Core Concepts

Main Features

Overview

# Python

# PHP

On This Page