Personal tools

Template:PeakCountPerSample: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(92 intermediate revisions by the same user not shown)
Line 3: Line 3:
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/modules/exporting.js"></script>
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/highcharts/modules/exporting.js"></script>
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function (){
$(document).ready(function (){
Line 15: Line 16:
var categories_yAxis = [];
var categories_yAxis = [];
var categories_xAxis = [];
var categories_xAxis = [];
var categories_xAxisTemp=[];


var ids    = [];
var ids    = [];
Line 45: Line 47:
count_temp=tmp_array[3];
count_temp=tmp_array[3];
}
}
categories_xAxis.push('<b>EntrezGene:</b> <a href="https://fantom5-collaboration.gsc.riken.jp/resource_browser/EntrezGene:'+id_temp+'" target="_blank">'+id_temp+'</a>'+'<br>'+'<b>Symbol:</b>'+symb_temp+'<br>'+'<b>Description:</b>'+desc_temp);
var peak_c = peakscount[i];
item = {}
      item ["EntrezGene"]  = id_temp;
      item ["Symbol"]      = symb_temp;
      item ["Description"] = desc_temp;
      item ["PeakCount"]  = peak_c;
//categories_xAxisTemp.push(item);
categories_xAxis.push('EntrezGene:'+id_temp+'/'+'Symbol:'+symb_temp+'/'+'Description:'+desc_temp);
 
 
 




Line 67: Line 79:
                 text: graph_subtitle
                 text: graph_subtitle
             },
             },
             xAxis: {
             xAxis: {
                 
                    min:20,
                 categories: categories_xAxis,
                 categories: categories_xAxis,
                 title: {
                 title: {
                     enabled: false,
                     enabled: true,
                     text: xAxis_title
                     text: xAxis_title
                 },
                 },
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                 labels: {
                 labels: {
                     step: 1,
                     step: 20,
                     rotation: -90,
                     rotation: -90,
                     enabled: true,
                     enabled: true,
Line 80: Line 98:
                     align: 'right',
                     align: 'right',
                     style: {
                     style: {
                         fontSize: '8px',
                        width:'30px',
                        height:'150px',
                         fontSize: '9px',
                         fontFamily: 'Verdana, sans-serif'
                         fontFamily: 'Verdana, sans-serif'
                     },
                     },
                     formatter: function() {
                     formatter: function() {
                         var n_symindex  = this.value.indexOf("Symbol:");//10
                         var n_symindex  = this.value.split("/")[1].split(":")[1];//10
                         var n_descindex = this.value.indexOf("Description:"); //-7
                        // var n_symindex  = this.value.indexOf("Symbol:");//10
                         var sym = this.value.substring(n_symindex +11, n_descindex-7);
                         //var n_descindex = this.value.indexOf("Description:"); //-7
                         return sym;
                         //var sym = this.value.substring(n_symindex +11, n_descindex-7);
                         //return sym;
                          return n_symindex ;
                     }
                     }
                 },
                 },
               events: {
               events: {
                   setExtremes: function(event) {
                   setExtremes: function(event) {
                        if (event.max) {
                          if (event.max) {
                          var frequency = Math.floor((event.max - event.min) / 17);
                            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 = 1;
                                  this.options.labels.step = 20;
                    }
                          }
                }
                  }
            },
              },
                
                
                 startOnTick: false,
                 startOnTick: false,
Line 110: Line 132:
                     text: yAxis_title
                     text: yAxis_title
                 },
                 },
                gridLineColor: 'transparent',
                 labels: {
                 labels: {
                     enabled: false,
                     enabled: true,
                     overflow: 'justify'
                     overflow: 'justify',
                style:{
                    width:'10px',
                }
                 },
                 },
             
                tickInterval:5,
                 max:max_peakcount,
                 max:max_peakcount,
                 min:0,
                 min:0,
Line 124: Line 150:
               useHTML: true,
               useHTML: true,
                 formatter:function(){
                 formatter:function(){
                 //show tooltip $("#mytoolTip").html(this.x+'<br><b>Number of peaks:</b> '+this.y) ;            
                 //show tooltip $("#mytoolTip").html(this.x+'<br><b>Number of peaks:</b> '+this.y) ;
                 return  this.x+'<br><b>Number of peaks:</b> '+this.y;
                var ret_inf= '';
             
                var elements = this.x.split('/');
                  for(var i=0, l=elements.length; i<l; i++)  {
                    var el = elements[i];
                      if(el != '' || el != 'NULL'){
                        var splitted = el.split(':');
                          if(splitted!='NULL' || splitted !='')
                          {
                            if(splitted[0]=='EntrezGene'){ret_inf=ret_inf+'<b>EntrezGene:</b> <a href="https://fantom5-collaboration.gsc.riken.jp/resource_browser/EntrezGene:'+splitted[1]+'"target="_blank">'+splitted[1]+'</a>'+'<br>' ;}
                            else if(splitted[0]=='Symbol'){ret_inf=ret_inf+'<b>Symbol:</b>'+splitted[1]+'<br>' ;}
                            else if(splitted[0]=='Description'){ret_inf=ret_inf+'<b>Description:</b>'+splitted[1]+'<br>' ;}
                          }
                      }
                  }     
                 return  ret_inf+'<br><b>Number of peaks:</b> '+this.y;
             }
             }
                      
                      
             },
             },
             legend: {
             legend: {
                enabled:false,
                 layout: 'vertical',
                 layout: 'vertical',
                 align: 'right',
                 align: 'right',
Line 156: Line 198:
                 scatter: {
                 scatter: {
                     marker: {
                     marker: {
                         symbol: 'square',
                        radius: 3,
                         symbol: 'circle',
                         states: {
                         states: {
                             hover: {
                             hover: {
Line 185: Line 228:
     var tmp = peakscount[i];
     var tmp = peakscount[i];
     var num = parseFloat(tmp);
     var num = parseFloat(tmp);
     options.series[0].data.push(num);
    //var col = getColor(num);
     options.series[0].data.push(
//{y:num,fillColor: col}
num);
     }
     }
 
 
      
      


var chart = new Highcharts.Chart(options);
new Highcharts.Chart(options);   
//var chart = new Highcharts.Chart(options, function(cha){
 
        //$("#list").change(function(){
          // changeType(cha, this.value);
        //});
       
  // });
 
});
});
function changeType(chart,selVal){
    var options = chart.options;
alert(options.xAxis.categories)
    alert(options.series[0].data)
//var sorted = sortByKey(categories_xAxisTemp[0], "Symbol");
    //    alert(sorted);
    if(selVal == 1 || selVal == '')
    {
        //options.series[0].data= [];
    }
    else if(selVal == 2)
    {
        //options.series[0].data= [];
    }
    else if(selVal == 3)
    {
        options.series[0].data= [];
    }
    else
    {
      options.series[0].data= [];
    } 
    //chart.redraw();
    var chart = new Highcharts.Chart(options);   
}
function zoomTo15Points(chart){
    var points=chart.series[0].points;
    if(points.length<15)  return;
    var min=points[0].x;   
    var max=points[14].x;
    //If you wish to zoom to 15 days you can modify max as
    // var max=min + 1000*60*60*24*14
    chart.xAxis[0].setExtremes(min,max);   
    chart.showResetZoom();
}
//380101  800026 962043 943D57 A60223 BA0002 BD0026 C40608 E31A1C FC4E2A FD8D3C FEB24C FED976 FFEDA0
function getColor(d) {
    return d > 100 ? '#8B0000' :
          d > 80  ? '#8B0000' :
          d > 70  ? '#8B0000' :
          d > 50  ? '#800026' :
          d > 40  ? '#BD0026':
          d > 30  ? '#BA2B00' :
          d > 20  ? '#E03400' :
          d > 15  ? '#E31A1C':
          d > 10  ? '#FC4E2A':
          d > 7  ? '#FD8D3C':
          d > 5  ? '#FEB24C':
          d > 2  ? '#FED976':
                      '#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>
</html>
<!--div id="selectbox"><b>Sort by</b>
<select id="list">
    <option value="1">peak count</option>
    <option value="2">symbol name</option>
</select>
</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>

Latest revision as of 10:44, 2 October 2013

Retrieved from "http://f5-webapp4.gsc.riken.jp/resource_browser/index.php?title=Template:PeakCountPerSample&oldid=3076213"