<html>
<!- Thanks to author of canvasXpress (5.x) Isaac Neuhaus -!>
<head>
<title>HeatMap Example</title>
<script type="text/javascript" src="./js/canvasXpress.min.js"></script>
<script>
var gr;
var showDemo = function () {
gr = new CanvasXpress("canvas4", {
"y": {
"vars": ["Gene1","Gene2","Gene3","Gene4","Gene5","Gene6","Gene7"],
"smps": ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8"],
"desc": ["Intensity"],
"data": [
[10,12,153,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,200,47,58],
[15,14,100,5,34,130,82,51],
[100,82,73,124,0,4,5,142],
[100,82,73,124,0,4,5,142]
]
}
}, {
"graphType": "Heatmap",
"indicatorCenter": "rainbow",
"heatmapType": "purple-red"
})
}
function update()
{
remoteData = [
[10,12,153,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,2000,47,58],
[15,14,100,5,34,130,82,51],
[100,82,73,124,0,4,5,142],
[100,82,73,124,0,4,5,142]
];
newData = {
"y": {
"vars": ["Gene1","Gene2","Gene3","Gene4","Gene5","Gene6","Gene7"],
"smps": ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8"],
"desc": ["Intensity"],
"data": remoteData
}
};
gr.updateData(newData);
}
</script>
</head>
<body onload="showDemo();">
<canvas id="canvas4" width="613" height="500"></canvas>
<input type="button" value="Send" id="send-button" onclick="update();">
</body>
</html>