Personal tools

Template:PeakCountPerSample: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(113 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 (){
 
var content    = "</html>{{#var:db_content}}<html>";
var content    = "</html>{{{1}}}<html>";
var delimiter = "</html>{{{4}}}<html>";
var delimiter  = "</html>{{{2}}}<html>";
var prop_delimiter = "</html>{{{5}}}<html>";
var graph_title = "</html>{{{6}}}<html>";
var graph_subtitle = "</html>{{{7}}}<html>";
var xAxis_title = "</html>{{{8}}}<html>";
var yAxis_title = "</html>{{{9}}}<html>";
var content_array = content.split(delimiter);
var content_array = content.split(delimiter);
var categories_yAxis = [];
var categories_xAxis = [];
var categories_xAxisTemp=[];


var ids    = [];
var ids    = [];
var symbols = [];
var symbols = [];
var desc    = [];
var desc    = [];
var peakscount =[];
var peakscount =[];
var max_peakcount=0;


for(var i=0, l=content_array.length; i<l; i++){
for(var i=0, l=content_array.length; i<l-1; i++){
var tmp_array = content_array[i].split(delimeter);
var symb_temp="";
var tmp2= categories_extended_array[i];
var id_temp="";
ids.push(tmp_array[0]);
var desc_temp="";
desc.push(tmp_array[1]);
var count_temp="";
symbols.push(tmp_array[2]);
var tmp_array = content_array[i].split(prop_delimiter);
if(tmp_array.length>0){
id_temp=tmp_array[0];
}
if(tmp_array.length>1){
symb_temp=tmp_array[1];
}
if(tmp_array.length>2){
desc_temp=tmp_array[2];
}
}
if(tmp_array.length>3){
var tt = parseFloat(tmp_array[3]);
if(tt> max_peakcount){
max_peakcount=tt;
}
peakscount.push(tmp_array[3]);
count_temp=tmp_array[3];
}
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);


for(var i=0, l=ids.length; i<l; i++){
var peak_content ="</html>
{{#ask:[[Category:FFCP]][[EntrezGene::<html>"ids[0]"</html>]]
|format=array |name=peaks
}}


<html>";
var peak_count=peak_content.length;
peakscount.push(peak_count);
}
}
max_peakcount =max_peakcount +5;


    var chart;
 
  var chart;
   // Build the chart
   // Build the chart
     var options={
     var options={
             chart: {
             chart: {
                renderTo: 'container',
                 type: 'scatter',
                 type: 'scatter',
                 zoomType: 'xy'
                 zoomType: 'x'
               
             },
             },
             title: {
             title: {
                 text: 'Height Versus Weight of 507 Individuals by Gender'
                 text:graph_title
             },
             },
             subtitle: {
             subtitle: {
                 text: 'Source: Heinz  2003'
                 text: graph_subtitle
             },
             },
             xAxis: {
             xAxis: {
                 
                    min:20,
                categories: categories_xAxis,
                 title: {
                 title: {
                     enabled: true,
                     enabled: true,
                     text: 'Height (cm)'
                     text: xAxis_title
                 },
                 },
                 startOnTick: true,
                 lineWidth: 0,
                 endOnTick: true,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                labels: {
                    step: 20,
                    rotation: -90,
                    enabled: true,
                    overflow: 'justify',
                    align: 'right',
                    style: {
                        width:'30px',
                        height:'150px',
                        fontSize: '9px',
                        fontFamily: 'Verdana, sans-serif'
                    },
                    formatter: function() {
                        var n_symindex  = this.value.split("/")[1].split(":")[1];//10
                        // var n_symindex  = this.value.indexOf("Symbol:");//10
                        //var n_descindex = this.value.indexOf("Description:"); //-7
                        //var sym = this.value.substring(n_symindex +11, n_descindex-7);
                        //return sym;
                          return n_symindex ;
                    }
                 },
              events: {
                  setExtremes: function(event) {
                          if (event.max) {
                            var frequency = Math.floor((event.max - event.min) / 20);
                            this.options.labels.step = frequency;
                          } else {
                                  this.options.labels.step = 20;
                          }
                  }
              },
             
                startOnTick: false,
                 showLastLabel: true
                 showLastLabel: true
             },
             },
             yAxis: {
             yAxis: {
              categories: categories_yAxis,
                 title: {
                 title: {
                     text: 'Weight (kg)'
                    enabled: false,
                     text: yAxis_title
                },
                gridLineColor: 'transparent',
                labels: {
                    enabled: true,
                    overflow: 'justify',
                style:{
                    width:'10px',
                 }
                 }
                },
                tickInterval:5,
                max:max_peakcount,
                min:0,
                startOnTick: false,
                showLastLabel: true
               
            },
            tooltip: {
              useHTML: true,
                formatter:function(){
                //show tooltip $("#mytoolTip").html(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: 'left',
                 align: 'right',
                 verticalAlign: 'top',
                 verticalAlign: 'top',
                 x: 100,
                 x: -10,
                 y: 70,
                 y: 30,
                 floating: true,
                 floating: true,
                 backgroundColor: '#FFFFFF',
                 backgroundColor: '#FFFFFF',
                 borderWidth: 1
                 borderWidth: 2
             },
             },
             plotOptions: {
             plotOptions: {
                series: {
                point: {
                    events: {
                        mouseOver: function() {
                            //show tooltip $("#mytoolTip").html(this.x+'<br><b>Number of peaks:</b> '+this.y) ;     
                        }
                    }
                },
                events: {
                    mouseOut: function() {                       
                        //hide tooltip$("#mytoolTip").empty();
                    }
                }
            },
                 scatter: {
                 scatter: {
                     marker: {
                     marker: {
                         radius: 5,
                         radius: 3,
                        symbol: 'circle',
                         states: {
                         states: {
                             hover: {
                             hover: {
Line 90: Line 213:
                             }
                             }
                         }
                         }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} cm, {point.y} kg'
                     }
                     }
                 }
                 }
             },
             },
             series: [
             series: [{  
                  {  
                   name :'TF factors',
                   name ="peak counts",
                   color: 'rgba(67, 110, 238, .7)',
                   color: 'rgba(223, 83, 83, .5)',
  data: []
  data: []
  },
  }]
                  {
                  name: 'transcription factor',
                  color: 'rgba(119, 152, 191, .5)',
                  data: []
                  }]


       };
       };
     var series_temp = {};
     var series_temp = {data: []};
     for(var i=0, l=peakscount.length; i<l; i++){
     for(var i=0, l=peakscount.length; i<l; i++){
     var tmp = peakscount[i];
     var tmp = peakscount[i];
     var num = parseFloat(tmp);
     var num = parseFloat(tmp);
     series_temp.data.push(num*100);
     //var col = getColor(num);
    options.series[0].data.push(
//{y:num,fillColor: col}
num);
     }
     }
    options.series[0].push(series_temp );
    series_temp = {};
    for(var i=0, l=symbols.length; i<l; i++){
    var tmp = symbols[i];
    series_temp.data.push(tmp);
    }
    options.series[1].push(series_temp );


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>
<!-- if it does not work test for {{#arrayprint:peaks}} -->
<!--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='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"