Template:PeakCountPerSample: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
(22 intermediate revisions by the same user not shown) | |||
Line 47: | Line 47: | ||
count_temp=tmp_array[3]; | count_temp=tmp_array[3]; | ||
} | } | ||
var peak_c = peakscount[i]; | |||
item = {} | item = {} | ||
item ["EntrezGene"] = id_temp; | |||
item ["Symbol"] = symb_temp; | |||
item ["Description"] = desc_temp; | |||
categories_xAxisTemp.push(item); | item ["PeakCount"] = peak_c; | ||
//categories_xAxisTemp.push(item); | |||
categories_xAxis.push('EntrezGene:'+id_temp+'/'+'Symbol:'+symb_temp+'/'+'Description:'+desc_temp); | categories_xAxis.push('EntrezGene:'+id_temp+'/'+'Symbol:'+symb_temp+'/'+'Description:'+desc_temp); | ||
Line 68: | Line 70: | ||
renderTo: 'container', | renderTo: 'container', | ||
type: 'scatter', | type: 'scatter', | ||
zoomType: ' | zoomType: 'x' | ||
}, | }, | ||
Line 79: | Line 81: | ||
xAxis: { | xAxis: { | ||
min:20, | min:20, | ||
categories: categories_xAxis, | categories: categories_xAxis, | ||
Line 85: | Line 88: | ||
text: xAxis_title | text: xAxis_title | ||
}, | }, | ||
lineWidth: 0, | |||
minorGridLineWidth: 0, | |||
lineColor: 'transparent', | |||
labels: { | labels: { | ||
step: | step: 20, | ||
rotation: -90, | rotation: -90, | ||
enabled: | enabled: true, | ||
overflow: 'justify', | overflow: 'justify', | ||
align: 'right', | align: 'right', | ||
style: { | style: { | ||
fontSize: ' | width:'30px', | ||
height:'150px', | |||
fontSize: '9px', | |||
fontFamily: 'Verdana, sans-serif' | fontFamily: 'Verdana, sans-serif' | ||
}, | }, | ||
formatter: function() { | formatter: function() { | ||
var n_symindex = this.value.split("/")[ | var n_symindex = this.value.split("/")[1].split(":")[1];//10 | ||
// var n_symindex = this.value.indexOf("Symbol:");//10 | // var n_symindex = this.value.indexOf("Symbol:");//10 | ||
//var n_descindex = this.value.indexOf("Description:"); //-7 | //var n_descindex = this.value.indexOf("Description:"); //-7 | ||
Line 107: | Line 115: | ||
setExtremes: function(event) { | setExtremes: function(event) { | ||
if (event.max) { | if (event.max) { | ||
var frequency = Math.floor((event.max - event.min) / | var frequency = Math.floor((event.max - event.min) / 20); | ||
this.options.labels.step = frequency; | this.options.labels.step = frequency; | ||
} else { | } else { | ||
this.options.labels.step = | this.options.labels.step = 20; | ||
} | } | ||
} | } | ||
Line 124: | Line 132: | ||
text: yAxis_title | text: yAxis_title | ||
}, | }, | ||
gridLineColor: 'transparent', | |||
labels: { | labels: { | ||
enabled: true, | enabled: true, | ||
overflow: 'justify' | overflow: 'justify', | ||
style:{ | |||
width:'10px', | |||
} | |||
}, | }, | ||
tickInterval:5, | |||
max:max_peakcount, | max:max_peakcount, | ||
min:0, | min:0, | ||
Line 159: | Line 171: | ||
}, | }, | ||
legend: { | legend: { | ||
enabled:false, | |||
layout: 'vertical', | layout: 'vertical', | ||
align: 'right', | align: 'right', | ||
Line 185: | Line 198: | ||
scatter: { | scatter: { | ||
marker: { | marker: { | ||
symbol: ' | radius: 3, | ||
symbol: 'circle', | |||
states: { | states: { | ||
hover: { | hover: { | ||
Line 222: | Line 236: | ||
var chart = new Highcharts.Chart(options, function(cha){ | new Highcharts.Chart(options); | ||
//var chart = new Highcharts.Chart(options, function(cha){ | |||
$("#list").change(function(){ | //$("#list").change(function(){ | ||
// changeType(cha, this.value); | |||
}); | //}); | ||
// }); | |||
}); | }); | ||
Line 237: | Line 252: | ||
alert(options.xAxis.categories) | alert(options.xAxis.categories) | ||
alert(options.series[0].data) | alert(options.series[0].data) | ||
//var sorted = sortByKey(categories_xAxisTemp[0], "Symbol"); | |||
// alert(sorted); | |||
if(selVal == 1 || selVal == '') | if(selVal == 1 || selVal == '') | ||
{ | { | ||
options.series[0].data= [] | //options.series[0].data= []; | ||
} | } | ||
else if(selVal == 2) | else if(selVal == 2) | ||
{ | { | ||
options.series[0].data= [] | //options.series[0].data= []; | ||
} | } | ||
else if(selVal == 3) | else if(selVal == 3) | ||
{ | { | ||
options.series[0].data= [] | options.series[0].data= []; | ||
} | } | ||
else | else | ||
{ | { | ||
options.series[0].data= [] | options.series[0].data= []; | ||
} | } | ||
//chart.redraw(); | //chart.redraw(); | ||
Line 286: | Line 303: | ||
d > 2 ? '#FED976': | d > 2 ? '#FED976': | ||
'#FFEDA0'; | '#FFEDA0'; | ||
} | |||
function sortByKey(array, key) { | |||
return array.sort(function(a, b) { | |||
var x = a[key]; var y = b[key]; | |||
return ((x < y) ? -1 : ((x > y) ? 1 : 0)); | |||
}); | |||
} | } | ||
</script> | </script> | ||
<div id="selectbox"><b>Sort by</b> | <!--div id="selectbox"><b>Sort by</b> | ||
<select id="list"> | <select id="list"> | ||
<option value="1">peak count</option> | <option value="1">peak count</option> | ||
<option value="2">symbol name</option> | <option value="2">symbol name</option> | ||
</select> | </select> | ||
</div> | </div--!> | ||
<div id="container" style="min-width:250px; height: auto; margin: 0 auto"></div> | <div id="container" style="min-width:250px; height: auto; margin: 0 auto"></div> | ||
<div id='mytoolTip'></div> | <div id='mytoolTip'></div> | ||
</html> | </html> |
Latest revision as of 10:44, 2 October 2013