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

  1. Include the JavaScript and the CSS CanvasXpress library files in the <head> element of the web page.
  2. 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.
  3. 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>

    <!-- 2. Include script to initialize object -->
    <script>
      onReady(function () {

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

  </head>

  <body>

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

  </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">
      onReady(function () {
        {{ 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">
      onReady(function () {
        var cX = new CanvasXpress( <?php echo json_encode($cx, JSON_NUMERIC_CHECK); ?>) 
      });
    </script>

  </body>

</html>