Overview - HTML
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="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script type="text/javascript" src="https://www.canvasxpress.org/dist/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
For a detailed information installing the CanvasXpress Python library go to the PyPI project. You can use CanvasXpress with Jupyter, Streamlit, Dash, Flask and Django. (contributed and maintained by Dr. Todd C. Brett).
Here is a simple example of using CanvasXpress with Python using Flask.
- Install Flask using pip
- Create the foilowing files:
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=json.dumps(cx_object_def)
)
if __name__ == '__main__':
app.run(debug=True)
and this is the template file (bar.html) which should be in the templates folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask CanvasXpress Example</title>
<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>
</head>
<body>
<canvas id='canvasId' width='540' height='540'></canvas>
<script type="text/javascript">
var cxConfig = {{ bar_graph | safe }};
new CanvasXpress(cxConfig);
</script>
</body>
</html>
PHP
This is a simple example with PHP
<?php
$cx = array(
"y" => array(
"vars" => array("Gene1"),
"smps" => array("Smp1", "Smp2", "Smp3"),
"data" => array(array(10, 35, 88))
),
"graphType" => "Bar"
);
?>
<html>
<head>
<meta charset="UTF-8">
<title>PHP CanvasXpress Example</title>
<!-- 1. 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>
</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 type="text/javascript">
var data = <?php echo json_encode($cx, JSON_NUMERIC_CHECK); ?>;
var cX = new CanvasXpress('canvasId', data);
</script>
</body>
</html>
R
CanvasXpress is simply used within R at the console to generate conventional plots, in R-Studio or seamlessly embedded in Shiny web applications. For more information visit our Github repository maintained by Dr. Connie Brett.
y <- read.table("https://www.canvasxpress.org/data/cX-irist-dat.txt",
header = TRUE,
sep = "\t",
quote = "",
row.names = 1,
fill = TRUE,
check.names = FALSE,
stringsAsFactors = FALSE
)
z <- read.table("https://www.canvasxpress.org/data/cX-irist-var.txt",
header = TRUE,
sep = "\t",
quote = "",
row.names = 1,
fill = TRUE,
check.names = FALSE,
stringsAsFactors = FALSE
)
canvasXpress(
data = y,
varAnnot = z,
graphType = "Scatter3D",
colorBy = "Species",
ellipseBy = "Species",
xAxis = list("Sepal.Length"),
yAxis = list("Petal.Width"),
zAxis = list("Petal.Length"),
theme = "CanvasXpress",
title = "Iris Data Set",
axisTickScaleFontFactor = 0.5,
axisTitleScaleFontFactor = 0.5
)
React
CanvasXpress can be implemented with any of the React-powered frameworks popular in the community. For more information visit our Github repository or check out this online example.
Here is an example with the basic installation:
import React from 'react';
import ReactDOM from 'react-dom';
import CanvasXpressReact from 'canvasxpress-react';
class Bar extends React.Component {
render() {
var target = "canvas";
var data = {
"y": {
"vars": ["Variable1"],
"smps": ["Sample1", "Sample2", "Sample3"],
"data": [[33, 48, 55]]
}
};
var config = {
"graphOrientation": "vertical",
"graphType": "Bar",
"theme": "CanvasXpress",
"title": "Simple Bar graph"
};
return (
<CanvasXpressReact target={target} data={data} config={config} width={500} height={500} />
)
}
}
var reactapp = document.createElement("div");
document.body.appendChild(reactapp);
ReactDOM.render(<Bar />, reactapp)
Vue.js
For more information visit our Github repository. Here is a simple example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css" />
</head>
<body>
<div id="app">
<div style="width: 600px; height: 600px;">
<canvas id="canvasId" style="position:absolute;" width="600" height="600"></canvas>
</div>
</div>
<!-- CanvasXpress -->
<script type="text/javascript" src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
<!-- Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Vue Script -->
<script type="module">
const { createApp } = Vue
createApp({
setup() {
const charts = {}
function foo() {
// Data
var data = {
"y": {
"vars": [ "Gene1"],
"smps": [ "Smp1", "Smp2", "Smp3" ],
"data": [ [ 10, 35, 88 ] ]
}
};
// Configuration
var conf = {
"graphType": "Bar"
};
charts.cx = new CanvasXpress("canvasId", data, conf);
}
return {
charts,
foo
}
}
}).mount('#app')
</script>
</body>
</html>
Ruby-on-Rails
For more information visit our Github repository
