canvasXpress
canvasXpress copied to clipboard
Problem updating Manhattan plot data using CanvasXpress.updateData(data)
Hiya! I've used updateData(data) to update a heatmap, and now I'm trying to do so with a Manhattan scatter plot. I have a selector that determines which data to plot, and I use a function to generate the plot, including the default when the page is first loaded. Here's how I'm updating the canvas:
// create/update the CanvasXpress object
var cx = CanvasXpress.$('canvasx');
if (cx==null) {
cx = new CanvasXpress('canvasx', data, conf, evts);
} else {
cx.updateData(data);
}
The initial plot created with the constructor is fine (first attached image). However, when I change the selection, updateData() leaves a blue spinner on the plot, with no plotted data, and the legend gets "-log10(p) vs Manhattan" appended (second attached image). It seems like a bug! I've pasted the data, conf, evts below with the two data options.
var evts = {
"click": function(o, e, t) {
var markerName = o.y.vars[0];
var markerIdentifier = genome+"."+markerName;
window.open("/"+"${WEB_PROPERTIES['webapp.path']}"+"/geneticmarker:"+markerIdentifier);
}
}
var conf = {
"decorations": {
"line": [
{ "color": "rgb(0,0,255)", "width": 1, "y": 1.3 }
]
},
"graphType": "Scatter2D",
"manhattanMarkerChromosomeNumber": "Chr",
"manhattanMarkerLogPValue": "-log10(p)",
"manhattanMarkerPosition": "Pos",
"scatterType": "manhattan",
"title": "Slide window with mouse; change scale with mouse wheel over axis; select region to zoom in; click marker to see its page.",
"titleScaleFontFactor": 0.1,
"disableToolbar": true,
"colorBy": "Trait",
"colorByShowLegend": true,
"canvasBox": true,
"setMinY": 0.0,
"dataPointSize": 50,
"legendBox": false,
"legendScaleFontFactor": 2,
"legendInside": false,
"legendPositionAuto": false,
"legendPosition": "right",
"chromosomeLengths": [
55915595,
51656713,
47781076,
49243852,
41936504,
50722821,
44683157,
46995532,
46843750,
50969635,
39172790,
40113140,
44408971,
49711204,
50939160,
37397385,
41906774,
62308140,
50589441,
46773167
]
}
data
{
"z": {
"Trait": [
"Seed oil",
"Seed oil",
"Seed oil",
"Seed oil",
"Seed oil",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed oil",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein"
]
},
"y": {
"smps": [
"Chr",
"Pos",
"-log10(p)"
],
"vars": [
"ss715591641",
"ss715591642",
"ss715591644",
"ss715591647",
"ss715591649",
"ss715594540",
"ss715595353",
"ss715595357",
"ss715614263",
"ss715621777",
"ss715621779",
"ss715621799",
"ss715621801",
"ss715621816",
"ss715637225",
"ss715637240",
"ss715637283",
"ss715637294",
"ss715637299",
"ss715637309",
"ss715637315",
"ss715637316",
"ss715637318",
"ss715637321",
"ss715637329"
],
"data": [
[
5,
38495217,
8.500312917381596
],
[
5,
38495666,
7.5003129173815966
],
[
5,
38519280,
6.1598939055432425
],
[
5,
38543317,
7.489454989793388
],
[
5,
38569452,
8.950781977329818
],
[
6,
46040638,
5.779891911959945
],
[
6,
5591484,
5.369572124974976
],
[
6,
5660542,
5.838631997765025
],
[
13,
24858209,
10.950781977329818
],
[
15,
3828587,
19.2298847052129
],
[
15,
3833574,
6.489454989793388
],
[
15,
3918803,
9.570247719997592
],
[
15,
3919945,
10.100179497572904
],
[
15,
3967324,
6.97061622231479
],
[
20,
29594697,
5.489454989793388
],
[
20,
29983050,
6.1598939055432425
],
[
20,
30930931,
10.349692476868064
],
[
20,
31150279,
30.939302159646388
],
[
20,
31243150,
32.27984069659404
],
[
20,
31436069,
7.8696662315049934
],
[
20,
31580769,
24.97881070093006
],
[
20,
31610452,
22.159893905543242
],
[
20,
31640038,
13.939302159646388
],
[
20,
31687470,
19.250263684430937
],
[
20,
31972955,
17.679853713888946
]
]
}
}
data
{
"z": {
"Trait": [
"Seed oil",
"Seed oil",
"Seed oil",
"Seed oil",
"Seed oil",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed oil",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein",
"Seed protein"
]
},
"y": {
"smps": [
"Chr",
"Pos",
"-log10(p)"
],
"vars": [
"ss715591641",
"ss715591642",
"ss715591644",
"ss715591647",
"ss715591649",
"ss715594540",
"ss715595353",
"ss715595357",
"ss715614263",
"ss715621777",
"ss715621779",
"ss715621799",
"ss715621801",
"ss715621816",
"ss715637225",
"ss715637240",
"ss715637283",
"ss715637294",
"ss715637299",
"ss715637309",
"ss715637315",
"ss715637316",
"ss715637318",
"ss715637321",
"ss715637329"
],
"data": [
[
5,
41855235,
8.500312917381596
],
[
5,
41854786,
7.5003129173815966
],
[
5,
41831154,
6.1598939055432425
],
[
5,
41807117,
7.489454989793388
],
[
5,
41780982,
8.950781977329818
],
[
6,
46572307,
5.779891911959945
],
[
6,
5597303,
5.369572124974976
],
[
6,
5666361,
5.838631997765025
],
[
13,
26343911,
10.950781977329818
],
[
15,
3846538,
19.2298847052129
],
[
15,
3851525,
6.489454989793388
],
[
15,
3936757,
9.570247719997592
],
[
15,
3937899,
10.100179497572904
],
[
15,
3985288,
6.97061622231479
],
[
20,
30744968,
5.489454989793388
],
[
20,
31129249,
6.1598939055432425
],
[
20,
21083902,
10.349692476868064
],
[
20,
32282623,
30.939302159646388
],
[
20,
32384035,
32.27984069659404
],
[
20,
32576952,
7.8696662315049934
],
[
20,
32721955,
24.97881070093006
],
[
20,
32752215,
22.159893905543242
],
[
20,
32781800,
13.939302159646388
],
[
20,
32835139,
19.250263684430937
],
[
20,
33121197,
17.679853713888946
]
]
}
}

I'm using the most recent CanvasXpress 37.8 given by
wget https://www.canvasxpress.org/dist/canvasXpress.css
wget https://www.canvasxpress.org/dist/canvasXpress.min.js
Note: I also need to update conf because the chromosome lengths change, but that's a separate issue. I'd be fine with blowing away the canvasx object and replacing it, if that's an option. I get Javasacript errors when I simply try to replace it with a new constructor call.