Interactive Dashboards with DOE and Boxplot Charts
Dashboards in CanvasXpress streamline data visualization and analysis by combining various charts and visual elements into one interactive interface. With customizable layouts, they offer a clear view of complex datasets, making it easier to spot trends and insights. Users can filter, drill down, and explore data dynamically, providing a user-friendly experience for both experts and non-technical audiences. Whether for business, research, or project monitoring, CanvasXpress dashboards help users make confident, data-driven decisions efficiently.
<html>
<head>
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"></canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
// Use a data frame (2D-array) for the graph
var data = [
[ "Id", "U-Trial 1", "U-Trial 2", "U-Trial 3", "S-Trial 1", "S-Trial 2", "S-Trial 3", "Order", "Sex", "Age", "Opinion", "Smoker"],
[ "s1", 38.4, 27.7, 25.7, 53.1, 30.6, 30.2, "1", "M", 23, "pos", "N"],
[ "s2", 46.2, 57.2, 41.9, 54.7, 43.3, 56.7, "2", "F", 43, "neg", "Y"],
[ "s3", 72.5, 57.9, 51.9, 74.2, 53.4, 42.4, "1", "M", 43, "pos", "N"],
[ "s4", 38, 38, 32.2, 49.6, 37.4, 34.4, "2", "M", 32, "neg", "N"],
[ "s5", 82.8, 57.9, 64.7, 53.6, 48.6, 44.8, "1", "M", 15, "neg", "N"],
[ "s6", 33.9, 32, 31.4, 51.3, 35.5, 42.9, "2", "F", 37, "pos", "Y"],
[ "s7", 50.4, 40.6, 40.1, 44.1, 46.9, 42.7, "1", "F", 26, "pos", "N"],
[ "s8", 35, 33.1, 43.2, 34, 26.4, 24.8, "2", "F", 35, "pos", "N"],
[ "s9", 32.8, 26.8, 33.9, 34.5, 25.1, 25.1, "1", "M", 26, "pos", "N"],
[ "s10", 60.1, 53.2, 40.4, 59.1, 87.1, 59.2, "2", "F", 31, "indiff", "N"],
[ "s11", 75.1, 63.1, 58, 67.3, 43.8, 42.2, "1", "F", 35, "pos", "Y"],
[ "s12", 57.6, 57.7, 61.5, 75.5, 126.6, 48.4, "2", "F", 55, "indiff", "Y"],
[ "s13", 55.5, 63.3, 44.6, 41.1, 41.8, 32, "1", "F", 25, "pos", "Y"],
[ "s14", 49.5, 45.8, 35.3, 52.2, 53.8, 48.1, "2", "M", 39, "indiff", "Y"],
[ "s15", 40.9, 35.7, 37.2, 28.3, 26, 33.7, "1", "M", 25, "indiff", "N"],
[ "s16", 44.3, 46.8, 39.4, 74.9, 45.3, 42.6, "2", "M", 26, "pos", "N"],
[ "s17", 93.8, 91.9, 77.4, 77.5, 55.8, 54.9, "1", "M", 33, "neg", "Y"],
[ "s18", 47.9, 59.9, 52.8, 50.9, 58.6, 64.5, "2", "M", 62, "neg", "N"],
[ "s19", 75.2, 54.1, 63.6, 70.1, 44, 43.1, "1", "F", 54, "pos", "Y"],
[ "s20", 46.2, 39.3, 56.6, 60.3, 47.8, 52.8, "2", "F", 38, "neg", "N"],
[ "s21", 56.3, 45.8, 58.9, 59.9, 36.8, 44.3, "1", "M", 65, "neg", "N" ]
];
// Create the configuration for the graph
var config = {
"graphOrientation" : "vertical",
"graphType" : "Boxplot",
"histogramBins" : false,
"showTransition" : false,
"smpTextRotate" : 90,
"smpTitle" : "Smoking Status",
"theme" : "lastAirBenderWater",
"xAxis" : ["U-Trial 1","U-Trial 2","U-Trial 3","S-Trial 1","S-Trial 2","S-Trial 3"]
}
// Event used to create graph (optional)
var events = false
// Functions after rendering graph
var afterRender = [
[
"groupSamples",
["Smoker"]
],
[
"createDOE",
[]
]
]
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events, false, afterRender);
</script>
</body>
</html>
<html>
<head>
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"></canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
// Create the data for the graph
var data = {
"x" : {
"Age" : [23,43,43,32,15,37,26,35,26,31,35,55,25,39,25,26,33,62,54,38,65],
"Opinion" : ["pos","neg","pos","neg","neg","pos","pos","pos","pos","indiff","pos","indiff","pos","indiff","indiff","pos","neg","neg","pos","neg","neg"],
"Order" : ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1"],
"Sex" : ["M","F","M","M","M","F","F","F","M","F","F","F","F","M","M","M","M","M","F","F","M"],
"Smoker" : ["N","Y","N","N","N","Y","N","N","N","N","Y","Y","Y","Y","N","N","Y","N","Y","N","N"]
},
"y" : {
"data" : [
[38.4,46.2,72.5,38,82.8,33.9,50.4,35,32.8,60.1,75.1,57.6,55.5,49.5,40.9,44.3,93.8,47.9,75.2,46.2,56.3],
[27.7,57.2,57.9,38,57.9,32,40.6,33.1,26.8,53.2,63.1,57.7,63.3,45.8,35.7,46.8,91.9,59.9,54.1,39.3,45.8],
[25.7,41.9,51.9,32.2,64.7,31.4,40.1,43.2,33.9,40.4,58,61.5,44.6,35.3,37.2,39.4,77.4,52.8,63.6,56.6,58.9],
[53.1,54.7,74.2,49.6,53.6,51.3,44.1,34,34.5,59.1,67.3,75.5,41.1,52.2,28.3,74.9,77.5,50.9,70.1,60.3,59.9],
[30.6,43.3,53.4,37.4,48.6,35.5,46.9,26.4,25.1,87.1,43.8,126.6,41.8,53.8,26,45.3,55.8,58.6,44,47.8,36.8],
[30.2,56.7,42.4,34.4,44.8,42.9,42.7,24.8,25.1,59.2,42.2,48.4,32,48.1,33.7,42.6,54.9,64.5,43.1,52.8,44.3]
],
"desc" : ["time in seconds"],
"smps" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21"],
"vars" : ["U-Trial 1","U-Trial 2","U-Trial 3","S-Trial 1","S-Trial 2","S-Trial 3"]
}
}
// Create the configuration for the graph
var config = {
"graphOrientation" : "vertical",
"graphType" : "Boxplot",
"histogramBins" : false,
"showTransition" : false,
"smpTextRotate" : 90,
"smpTitle" : "Smoking Status",
"theme" : "lastAirBenderWater",
"xAxis" : ["U-Trial 1","U-Trial 2","U-Trial 3","S-Trial 1","S-Trial 2","S-Trial 3"]
}
// Event used to create graph (optional)
var events = false
// Functions after rendering graph
[
[
"groupSamples",
["Smoker"]
],
[
"createDOE",
[]
]
]
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
</script>
</body>
</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-scents-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-scents-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
graphOrientation="vertical",
graphType="Boxplot",
histogramBins=FALSE,
showTransition=FALSE,
smpTextRotate=90,
smpTitle="Smoking Status",
theme="lastAirBenderWater",
xAxis=list("U-Trial 1", "U-Trial 2", "U-Trial 3", "S-Trial 1", "S-Trial 2", "S-Trial 3"),
afterRender=list(list("groupSamples", list("Smoker")), list("createDOE", list()))
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser
if __name__ == "__main__":
# Define the chart with its data and configuration
chart: CanvasXpress = CanvasXpress(
render_to = "dashboard3",
data = {
"x": {
"Age": [23, 43, 43, 32, 15, 37, 26, 35, 26, 31, 35, 55, 25, 39, 25, 26, 33, 62, 54, 38, 65],
"Opinion": ["pos", "neg", "pos", "neg", "neg", "pos", "pos", "pos", "pos", "indiff", "pos", "indiff", "pos", "indiff", "indiff", "pos", "neg", "neg", "pos", "neg", "neg"],
"Order": ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1"],
"Sex": ["M", "F", "M", "M", "M", "F", "F", "F", "M", "F", "F", "F", "F", "M", "M", "M", "M", "M", "F", "F", "M"],
"Smoker": ["N", "Y", "N", "N", "N", "Y", "N", "N", "N", "N", "Y", "Y", "Y", "Y", "N", "N", "Y", "N", "Y", "N", "N"]
},
"y": {
"data": [
[38.4, 46.2, 72.5, 38, 82.8, 33.9, 50.4, 35, 32.8, 60.1, 75.1, 57.6, 55.5, 49.5, 40.9, 44.3, 93.8, 47.9, 75.2, 46.2, 56.3],
[27.7, 57.2, 57.9, 38, 57.9, 32, 40.6, 33.1, 26.8, 53.2, 63.1, 57.7, 63.3, 45.8, 35.7, 46.8, 91.9, 59.9, 54.1, 39.3, 45.8],
[25.7, 41.9, 51.9, 32.2, 64.7, 31.4, 40.1, 43.2, 33.9, 40.4, 58, 61.5, 44.6, 35.3, 37.2, 39.4, 77.4, 52.8, 63.6, 56.6, 58.9],
[53.1, 54.7, 74.2, 49.6, 53.6, 51.3, 44.1, 34, 34.5, 59.1, 67.3, 75.5, 41.1, 52.2, 28.3, 74.9, 77.5, 50.9, 70.1, 60.3, 59.9],
[30.6, 43.3, 53.4, 37.4, 48.6, 35.5, 46.9, 26.4, 25.1, 87.1, 43.8, 126.6, 41.8, 53.8, 26, 45.3, 55.8, 58.6, 44, 47.8, 36.8],
[30.2, 56.7, 42.4, 34.4, 44.8, 42.9, 42.7, 24.8, 25.1, 59.2, 42.2, 48.4, 32, 48.1, 33.7, 42.6, 54.9, 64.5, 43.1, 52.8, 44.3]
],
"desc": ["time in seconds"],
"smps": ["s1", "s2", "s3", "s4", "s5", "s6", "s7", "s8", "s9", "s10", "s11", "s12", "s13", "s14", "s15", "s16", "s17", "s18", "s19", "s20", "s21"],
"vars": ["U-Trial 1", "U-Trial 2", "U-Trial 3", "S-Trial 1", "S-Trial 2", "S-Trial 3"]
}
},
config = {
"graphOrientation": "vertical",
"graphType": "Boxplot",
"histogramBins": False,
"showTransition": False,
"smpTextRotate": 90,
"smpTitle": "Smoking Status",
"theme": "lastAirBenderWater",
"xAxis": ["U-Trial 1", "U-Trial 2", "U-Trial 3", "S-Trial 1", "S-Trial 2", "S-Trial 3"]
},
after_render = [
[
"groupSamples",
["Smoker"]
],
[
"createDOE",
[]
]
],
width = 600,
height = 600
)
# Display the chart in its own Web page
show_in_browser(chart)
Run this notebook:
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph
graph(
CanvasXpress(
render_to = "dashboard3",
data = {
"x": {
"Age": [23, 43, 43, 32, 15, 37, 26, 35, 26, 31, 35, 55, 25, 39, 25, 26, 33, 62, 54, 38, 65],
"Opinion": ["pos", "neg", "pos", "neg", "neg", "pos", "pos", "pos", "pos", "indiff", "pos", "indiff", "pos", "indiff", "indiff", "pos", "neg", "neg", "pos", "neg", "neg"],
"Order": ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1", "2", "1"],
"Sex": ["M", "F", "M", "M", "M", "F", "F", "F", "M", "F", "F", "F", "F", "M", "M", "M", "M", "M", "F", "F", "M"],
"Smoker": ["N", "Y", "N", "N", "N", "Y", "N", "N", "N", "N", "Y", "Y", "Y", "Y", "N", "N", "Y", "N", "Y", "N", "N"]
},
"y": {
"data": [
[38.4, 46.2, 72.5, 38, 82.8, 33.9, 50.4, 35, 32.8, 60.1, 75.1, 57.6, 55.5, 49.5, 40.9, 44.3, 93.8, 47.9, 75.2, 46.2, 56.3],
[27.7, 57.2, 57.9, 38, 57.9, 32, 40.6, 33.1, 26.8, 53.2, 63.1, 57.7, 63.3, 45.8, 35.7, 46.8, 91.9, 59.9, 54.1, 39.3, 45.8],
[25.7, 41.9, 51.9, 32.2, 64.7, 31.4, 40.1, 43.2, 33.9, 40.4, 58, 61.5, 44.6, 35.3, 37.2, 39.4, 77.4, 52.8, 63.6, 56.6, 58.9],
[53.1, 54.7, 74.2, 49.6, 53.6, 51.3, 44.1, 34, 34.5, 59.1, 67.3, 75.5, 41.1, 52.2, 28.3, 74.9, 77.5, 50.9, 70.1, 60.3, 59.9],
[30.6, 43.3, 53.4, 37.4, 48.6, 35.5, 46.9, 26.4, 25.1, 87.1, 43.8, 126.6, 41.8, 53.8, 26, 45.3, 55.8, 58.6, 44, 47.8, 36.8],
[30.2, 56.7, 42.4, 34.4, 44.8, 42.9, 42.7, 24.8, 25.1, 59.2, 42.2, 48.4, 32, 48.1, 33.7, 42.6, 54.9, 64.5, 43.1, 52.8, 44.3]
],
"desc": ["time in seconds"],
"smps": ["s1", "s2", "s3", "s4", "s5", "s6", "s7", "s8", "s9", "s10", "s11", "s12", "s13", "s14", "s15", "s16", "s17", "s18", "s19", "s20", "s21"],
"vars": ["U-Trial 1", "U-Trial 2", "U-Trial 3", "S-Trial 1", "S-Trial 2", "S-Trial 3"]
}
},
config = {
"graphOrientation": "vertical",
"graphType": "Boxplot",
"histogramBins": False,
"showTransition": False,
"smpTextRotate": 90,
"smpTitle": "Smoking Status",
"theme": "lastAirBenderWater",
"xAxis": ["U-Trial 1", "U-Trial 2", "U-Trial 3", "S-Trial 1", "S-Trial 2", "S-Trial 3"]
},
after_render = [
[
"groupSamples",
["Smoker"]
],
[
"createDOE",
[]
]
],
width = 600,
height = 600
)
)
