Personal tools

Template:PeakCountPerSample: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(38 intermediate revisions by the same user not shown)
Line 16: Line 16:
var categories_yAxis = [];
var categories_yAxis = [];
var categories_xAxis = [];
var categories_xAxis = [];
var categories_xAxisTemp=[];


var ids    = [];
var ids    = [];
Line 46: 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 70: Line 81:


             xAxis: {
             xAxis: {
                 
                     min:20,
                     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 83: 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.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
                         //var sym = this.value.substring(n_symindex +11, n_descindex-7);
                         //var sym = this.value.substring(n_symindex +11, n_descindex-7);
                         //return sym;
                         //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;
                           //}
                           }
                   }
                   }
               },
               },
Line 106: Line 125:
                 startOnTick: false,
                 startOnTick: false,
                 showLastLabel: true
                 showLastLabel: true
            },
            scrollbar: {
              enabled: true
             },
             },
             yAxis: {
             yAxis: {
               categories: categories_yAxis,
               categories: categories_yAxis,
                 title: {
                 title: {
                     enabled: true,
                     enabled: false,
                     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 130: 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 162: Line 198:
                 scatter: {
                 scatter: {
                     marker: {
                     marker: {
                         symbol: 'square',
                        radius: 3,
                         symbol: 'circle',
                         states: {
                         states: {
                             hover: {
                             hover: {
Line 199: 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.series, this.value);
          // changeType(cha, this.value);
         });
         //});
          
          
    });
  // });


});
});


function changeType(series,selVal){
function changeType(chart,selVal){


     var options = series.chart.options;
     var options = chart.options;
     alert(series[0].data)
alert(options.xAxis.categories)
    alert(options)
     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 263: 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

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