Bar Graph
var cx = new CanvasXpress("canvas", {
"x": {
"Species": [
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"setosa",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"versicolor",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica",
"virginica"
]
},
"y": {
"smps": [
"var1",
"var2",
"var3",
"var4",
"var5",
"var6",
"var7",
"var8",
"var9",
"var10",
"var11",
"var12",
"var13",
"var14",
"var15",
"var16",
"var17",
"var18",
"var19",
"var20",
"var21",
"var22",
"var23",
"var24",
"var25",
"var26",
"var27",
"var28",
"var29",
"var30",
"var31",
"var32",
"var33",
"var34",
"var35",
"var36",
"var37",
"var38",
"var39",
"var40",
"var41",
"var42",
"var43",
"var44",
"var45",
"var46",
"var47",
"var48",
"var49",
"var50",
"var51",
"var52",
"var53",
"var54",
"var55",
"var56",
"var57",
"var58",
"var59",
"var60",
"var61",
"var62",
"var63",
"var64",
"var65",
"var66",
"var67",
"var68",
"var69",
"var70",
"var71",
"var72",
"var73",
"var74",
"var75",
"var76",
"var77",
"var78",
"var79",
"var80",
"var81",
"var82",
"var83",
"var84",
"var85",
"var86",
"var87",
"var88",
"var89",
"var90",
"var91",
"var92",
"var93",
"var94",
"var95",
"var96",
"var97",
"var98",
"var99",
"var100",
"var101",
"var102",
"var103",
"var104",
"var105",
"var106",
"var107",
"var108",
"var109",
"var110",
"var111",
"var112",
"var113",
"var114",
"var115",
"var116",
"var117",
"var118",
"var119",
"var120",
"var121",
"var122",
"var123",
"var124",
"var125",
"var126",
"var127",
"var128",
"var129",
"var130",
"var131",
"var132",
"var133",
"var134",
"var135",
"var136",
"var137",
"var138",
"var139",
"var140",
"var141",
"var142",
"var143",
"var144",
"var145",
"var146",
"var147",
"var148",
"var149",
"var150"
],
"data": [
[
5.1,
4.9,
4.7,
4.6,
5,
5.4,
4.6,
5,
4.4,
4.9,
5.4,
4.8,
4.8,
4.3,
5.8,
5.7,
5.4,
5.1,
5.7,
5.1,
5.4,
5.1,
4.6,
5.1,
4.8,
5,
5,
5.2,
5.2,
4.7,
4.8,
5.4,
5.2,
5.5,
4.9,
5,
5.5,
4.9,
4.4,
5.1,
5,
4.5,
4.4,
5,
5.1,
4.8,
5.1,
4.6,
5.3,
5,
7,
6.4,
6.9,
5.5,
6.5,
5.7,
6.3,
4.9,
6.6,
5.2,
5,
5.9,
6,
6.1,
5.6,
6.7,
5.6,
5.8,
6.2,
5.6,
5.9,
6.1,
6.3,
6.1,
6.4,
6.6,
6.8,
6.7,
6,
5.7,
5.5,
5.5,
5.8,
6,
5.4,
6,
6.7,
6.3,
5.6,
5.5,
5.5,
6.1,
5.8,
5,
5.6,
5.7,
5.7,
6.2,
5.1,
5.7,
6.3,
5.8,
7.1,
6.3,
6.5,
7.6,
4.9,
7.3,
6.7,
7.2,
6.5,
6.4,
6.8,
5.7,
5.8,
6.4,
6.5,
7.7,
7.7,
6,
6.9,
5.6,
7.7,
6.3,
6.7,
7.2,
6.2,
6.1,
6.4,
7.2,
7.4,
7.9,
6.4,
6.3,
6.1,
7.7,
6.3,
6.4,
6,
6.9,
6.7,
6.9,
5.8,
6.8,
6.7,
6.7,
6.3,
6.5,
6.2,
5.9
],
[
3.5,
3,
3.2,
3.1,
3.6,
3.9,
3.4,
3.4,
2.9,
3.1,
3.7,
3.4,
3,
3,
4,
4.4,
3.9,
3.5,
3.8,
3.8,
3.4,
3.7,
3.6,
3.3,
3.4,
3,
3.4,
3.5,
3.4,
3.2,
3.1,
3.4,
4.1,
4.2,
3.1,
3.2,
3.5,
3.6,
3,
3.4,
3.5,
2.3,
3.2,
3.5,
3.8,
3,
3.8,
3.2,
3.7,
3.3,
3.2,
3.2,
3.1,
2.3,
2.8,
2.8,
3.3,
2.4,
2.9,
2.7,
2,
3,
2.2,
2.9,
2.9,
3.1,
3,
2.7,
2.2,
2.5,
3.2,
2.8,
2.5,
2.8,
2.9,
3,
2.8,
3,
2.9,
2.6,
2.4,
2.4,
2.7,
2.7,
3,
3.4,
3.1,
2.3,
3,
2.5,
2.6,
3,
2.6,
2.3,
2.7,
3,
2.9,
2.9,
2.5,
2.8,
3.3,
2.7,
3,
2.9,
3,
3,
2.5,
2.9,
2.5,
3.6,
3.2,
2.7,
3,
2.5,
2.8,
3.2,
3,
3.8,
2.6,
2.2,
3.2,
2.8,
2.8,
2.7,
3.3,
3.2,
2.8,
3,
2.8,
3,
2.8,
3.8,
2.8,
2.8,
2.6,
3,
3.4,
3.1,
3,
3.1,
3.1,
3.1,
2.7,
3.2,
3.3,
3,
2.5,
3,
3.4,
3
],
[
1.4,
1.4,
1.3,
1.5,
1.4,
1.7,
1.4,
1.5,
1.4,
1.5,
1.5,
1.6,
1.4,
1.1,
1.2,
1.5,
1.3,
1.4,
1.7,
1.5,
1.7,
1.5,
1,
1.7,
1.9,
1.6,
1.6,
1.5,
1.4,
1.6,
1.6,
1.5,
1.5,
1.4,
1.5,
1.2,
1.3,
1.4,
1.3,
1.5,
1.3,
1.3,
1.3,
1.6,
1.9,
1.4,
1.6,
1.4,
1.5,
1.4,
4.7,
4.5,
4.9,
4,
4.6,
4.5,
4.7,
3.3,
4.6,
3.9,
3.5,
4.2,
4,
4.7,
3.6,
4.4,
4.5,
4.1,
4.5,
3.9,
4.8,
4,
4.9,
4.7,
4.3,
4.4,
4.8,
5,
4.5,
3.5,
3.8,
3.7,
3.9,
5.1,
4.5,
4.5,
4.7,
4.4,
4.1,
4,
4.4,
4.6,
4,
3.3,
4.2,
4.2,
4.2,
4.3,
3,
4.1,
6,
5.1,
5.9,
5.6,
5.8,
6.6,
4.5,
6.3,
5.8,
6.1,
5.1,
5.3,
5.5,
5,
5.1,
5.3,
5.5,
6.7,
6.9,
5,
5.7,
4.9,
6.7,
4.9,
5.7,
6,
4.8,
4.9,
5.6,
5.8,
6.1,
6.4,
5.6,
5.1,
5.6,
6.1,
5.6,
5.5,
4.8,
5.4,
5.6,
5.1,
5.1,
5.9,
5.7,
5.2,
5,
5.2,
5.4,
5.1
],
[
0.2,
0.2,
0.2,
0.2,
0.2,
0.4,
0.3,
0.2,
0.2,
0.1,
0.2,
0.2,
0.1,
0.1,
0.2,
0.4,
0.4,
0.3,
0.3,
0.3,
0.2,
0.4,
0.2,
0.5,
0.2,
0.2,
0.4,
0.2,
0.2,
0.2,
0.2,
0.4,
0.1,
0.2,
0.2,
0.2,
0.2,
0.1,
0.2,
0.2,
0.3,
0.3,
0.2,
0.6,
0.4,
0.3,
0.2,
0.2,
0.2,
0.2,
1.4,
1.5,
1.5,
1.3,
1.5,
1.3,
1.6,
1,
1.3,
1.4,
1,
1.5,
1,
1.4,
1.3,
1.4,
1.5,
1,
1.5,
1.1,
1.8,
1.3,
1.5,
1.2,
1.3,
1.4,
1.4,
1.7,
1.5,
1,
1.1,
1,
1.2,
1.6,
1.5,
1.6,
1.5,
1.3,
1.3,
1.3,
1.2,
1.4,
1.2,
1,
1.3,
1.2,
1.3,
1.3,
1.1,
1.3,
2.5,
1.9,
2.1,
1.8,
2.2,
2.1,
1.7,
1.8,
1.8,
2.5,
2,
1.9,
2.1,
2,
2.4,
2.3,
1.8,
2.2,
2.3,
1.5,
2.3,
2,
2,
1.8,
2.1,
1.8,
1.8,
1.8,
2.1,
1.6,
1.9,
2,
2.2,
1.5,
1.4,
2.3,
2.4,
1.8,
1.8,
2.1,
2.4,
2.3,
1.9,
2.3,
2.5,
2.3,
1.9,
2,
2.3,
1.8
]
],
"vars": [
"Sepal.Length",
"Sepal.Width",
"Petal.Length",
"Petal.Width"
],
"desc": ["centimeters"]
}
}, {
"graphType": "Bar",
"graphOrientation": "vertical",
"colorScheme": "basic",
"title": "Iris flower data set",
"subtitle": "Data grouped by Species",
"smpTitle": "Species",
"smpLabelScaleFontFactor": 5,
"background": "rgb(226,236,248)",
"legendBackgroundColor": "rgb(226,236,248)",
"smpLabelRotate": 90,
"smpTitle": "Species",
"smpTitleScaleFontFactor": 1.5,
"smpHairlineColor": "rgb(200,200,200)",
"xAxisTickColor": "rgb(200,200,200)",
"gradient": true,
"gradientType": "linear"
});
cx.groupSamples(["Species"]);
new CanvasXpress("canvas1", {
"y": {
"vars": [
"Gene1",
"Gene2",
"Gene3",
"Gene4",
"Gene5",
"Gene6"
],
"smps": [
"Smp1",
"Smp2",
"Smp3",
"Smp4",
"Smp5",
"Smp6",
"Smp7",
"Smp8"
],
"desc": [
"Intensity"
],
"data": [
[
10,
12,
3,
4,
100,
73,
42,
64
],
[
12,
4,
60,
5,
24,
14,
32,
13
],
[
7,
12,
20,
13,
49,
52,
42,
92
],
[
21,
10,
30,
8,
65,
166,
47,
58
],
[
15,
14,
100,
5,
34,
30,
82,
51
],
[
100,
82,
73,
4,
3,
4,
5,
2
]
]
},
"t": {
"smps": "((Smp2:0.8,(Smp4:0.7,((Smp1:0.6,(Smp6:0.2,Smp5:0.1):0.2):0.15,(Smp8:0.15,Smp3:0.05):0.1):0.15):0.2):0.05,Smp7:0.9)"
}
}, {
"graphType": "Bar",
"showAnimation": true,
"graphOrientation": "horizontal",
"showSmpDendrogram": true,
"smpDendrogramPosition": "right",
"backgroundType": "gradient",
"title": "Random data set",
"backgroundGradient2Color": "rgb(112,179,222)",
"backgroundGradient1Color": "rgb(226,236,248)",
"smpHairlineColor": false,
"gradient": true,
"smpTitle": "Cell Lines",
"xAxisTickColor": "rgb(100,100,100)",
"colorScheme": "basic"
})
new CanvasXpress("canvas2", {
"x": {
"Response": [
"Sensitive",
"Sensitive",
"Sensitive",
"Sensitive",
"Sensitive",
"Resistant",
"Resistant",
"Resistant"
]
},
"y": {
"vars": [
"Gene1"
],
"smps": [
"Smp1",
"Smp2",
"Smp3",
"Smp4",
"Smp5",
"Smp6",
"Smp7",
"Smp8"
],
"desc": [
"Intensity"
],
"data": [
[
10,
12,
20,
35,
40,
67,
72,
88
]
]
}
}, {
"graphType": "Bar",
"colorBy": "Response",
"title": "Random data set",
"background": "rgb(112,179,222)",
"smpTitle": "Cell Lines",
"legendBackgroundColor": false,
"graphOrientation": "vertical"
})