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, Streamlit, Dash, 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

CanvasXpress AI

Core Concepts

Main Features

Overview

# Python

# PHP

On This Page