Stacked Chart
A barplot shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value. Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.
Example Color Themes
<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" : {
"Factor1" : ["F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C"],
"Factor2" : ["F2-a","F2-a","F2-a","F2-a","F2-b","F2-b","F2-b","F2-b","F2-c","F2-c","F2-c","F2-c","F2-d","F2-d","F2-d","F2-d","F2-e","F2-e","F2-e","F2-e","F2-f","F2-f","F2-f","F2-f"],
"Factor3" : ["F3-i","F3-i","F3-j","F3-j","F3-k","F3-k","F3-l","F3-l","F3-m","F3-m","F3-n","F3-n","F3-o","F3-o","F3-p","F3-p","F3-q","F3-q","F3-r","F3-r","F3-s","F3-s","F3-t","F3-t"],
"Factor4" : ["F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b"],
"Factor5" : ["F5-a","F5-b","F5-c","F5-d","F5-e","F5-f","F5-g","F5-h","F5-i","F5-j","F5-k","F5-l","F5-m","F5-n","F5-o","F5-p","F5-q","F5-r","F5-s","F5-t","F5-u","F5-v","F5-w","F5-x"],
"Factor6" : [1,2,3,4,5,6,7,8,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8]
},
"y" : {
"data" : [
[2,4,6,8,3,5,7,9,2,4,6,8,3,5,7,9,3,5,7,9,4,6,8,10],
[4,6,8,10,3,5,7,9,2,4,6,8,1,3,5,7,2,4,6,8,3,5,7,9],
[3,5,7,9,4,6,8,10,3,5,7,9,2,4,6,8,4,6,8,10,3,5,7,9]
],
"smps" : ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8","Smp9","Smp10","Smp11","Smp12","Smp13","Smp14","Smp15","Smp16","Smp17","Smp18","Smp19","Smp20","Smp21","Smp22","Smp23","Smp24"],
"vars" : ["Var1","Var2","Var3"]
}
}
// Create the configuration for the graph
var config = {
"colorScheme":"Blues",
"foreground":"rgb(0,0,0)",
"graphOrientation":"vertical",
"graphType":"Stacked",
"groupingFactors":[
"Factor1"
],
"legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
"legendKeyBackgroundColor":"rgba(255,255,255,0)",
"objectBorderColor":"rgb(0,0,0)",
"sampleSpaceFactor":"1",
"showTransition":false,
"title":"Random Data",
"treemapBy":[
"Factor2",
"Factor3"
]
}
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config);
</script>
</body>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-stacked2-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/cX-stacked2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
colorScheme="Blues",
foreground="rgb(0,0,0)",
graphOrientation="vertical",
graphType="Stacked",
groupingFactors=list("Factor1"),
legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
legendKeyBackgroundColor="rgba(255,255,255,0)",
objectBorderColor="rgb(0,0,0)",
sampleSpaceFactor=1,
showTransition=FALSE,
title="Random Data",
treemapBy=list("Factor2", "Factor3")
)
