Commit 54bedff9 authored by Celine Noirot's avatar Celine Noirot
Browse files

Add graphics

parent 4033d9e4
......@@ -121,4 +121,191 @@ $(function () {
$("#ng6modal").modal();
}
}) ;
});
\ No newline at end of file
/**
* Fonction pour l'affichage du nombre de C analysé
*/
/*
* Define functions in charge to visualize charts
*/
$(".length-view-btn").click(function() {
if ($(":checked[id^=chk_sample_]").size() > 0) {
// Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html('<div id="highcharts_container"></div>');
$("#modal-foot-tmpl").html('<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>');
$("#highcharts_container").css('width', '845px');
$("#ng6modal").css('width', 'auto');
$("#ng6modal").css('margin-left', '-435px');
// Set graph
var description = new Array();
var valeur = new Array();
$(":checked[id^=chk_sample_]").each(function(){
var index = $(this).attr("id").split("_")[2] ;
var index_description = $("#descrip_" + index).val() ;
description.push(index_description);
var value_nombreC = $("#nb_C_" + index).val() ;
valeur.push(parseInt(value_nombreC));
});
// Draw graph
$('#highcharts_container').highcharts({
chart: {
type: 'column',
margin: [50, 50, 100, 80]
},
title: {
text: 'Number of C analysed :'
},
xAxis: {
categories: description,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: '# C analysed'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '# C analysed',
},
series: [{
name: 'NumberC',
data: valeur,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
//Display
$("#ng6modal").modal();
}
});
/**
* Fonction pour l'affichage graphique du % de methylation tout contexte
*/
/*
* Define functions in charge to visualize charts
*/
$(".length-view-btn4").click(function() {
if ($(":checked[id^=chk_sample_]").size() > 0) {
// Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html('<div id="highcharts_container4"></div>');
$("#modal-foot-tmpl").html('<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>');
$("#highcharts_container4").css('width', '845px');
$("#ng6modal").css('width', 'auto');
$("#ng6modal").css('margin-left', '-435px');
// Set graph
var description = new Array();
var valeurCPG = new Array();
var valeurCHG = new Array();
var valeurCHH = new Array();
$(":checked[id^=chk_sample_]").each(function(){
var index = $(this).attr("id").split("_")[2] ;
var index_description = $("#descrip_" + index).val() ;
description.push(index_description);
// tableau pour les valeurs de c en contexte CpG
var V_PercentCinCPG = $("#PercentCinCPG_" + index).val() ;
console.log("CPG : "+V_PercentCinCPG);
valeurCPG.push(parseFloat(V_PercentCinCPG));
// tableau pour les valeurs de c en contexte CHG
var V_PercentCinCHG = $("#PercentCinCHG_" + index).val() ;
console.log("CHG : "+V_PercentCinCHG);
valeurCHG.push(parseFloat(V_PercentCinCHG));
// tableau pour les valeurs de c en contexte CHH
var V_PercentCinCHH = $("#PercentCinCHH_" + index).val() ;
console.log("CHH : "+V_PercentCinCHH);
valeurCHH.push(parseFloat(V_PercentCinCHH));
});
// Draw graph
$('#highcharts_container4').highcharts({
chart: {
type: 'column'
},
title: {
text: '% methylation in context CPG, CHG and CHH :'
},
xAxis: {
categories: description,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Percent'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f}%</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{ name: '% C in CPG', data: valeurCPG },
{ name: '% C in CHG', data: valeurCHG },
{ name: '% C in CHH', data: valeurCHH }]
});
//Display
$("#ng6modal").modal();
}
});
});
......@@ -61,8 +61,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{$totalUnmethylatedCinCHG=$totalUnmethylatedCinCHG+$sample_results["default"].totalUnmethylatedCinCHG}
{$totalMethylatedCinCHH=$totalMethylatedCinCHH+$sample_results["default"].totalMethylatedCinCHH}
{$totalUnmethylatedCinCHH=$totalUnmethylatedCinCHH+$sample_results["default"].totalUnmethylatedCinCHH}
{$PercentCinCPG=round(($sample_results["default"].totalMethylatedCinCpG/($sample_results["default"].totalMethylatedCinCpG + $sample_results["default"].totalUnmethylatedCinCpG ))*100,2)}
{$PercentCinCHG=round(($sample_results["default"].totalMethylatedCinCHG/($sample_results["default"].totalMethylatedCinCHG + $sample_results["default"].totalUnmethylatedCinCHG ))*100,2)}
{$PercentCinCHH=round(($sample_results["default"].totalMethylatedCinCHH/($sample_results["default"].totalMethylatedCinCHH + $sample_results["default"].totalUnmethylatedCinCHH ))*100,2)}
{if $sample_results["default"].totalC > 0}
<tr>
<input type="hidden" id="PercentCinCPG_{$i}" value="{$PercentCinCPG}"/>
<input type="hidden" id="PercentCinCHG_{$i}" value="{$PercentCinCHG}"/>
<input type="hidden" id="PercentCinCHH_{$i}" value="{$PercentCinCHH}"/>
<input type="hidden" id="nb_C_{$i}" value="{$sample_results["default"].totalC}"/>
<input type="hidden" id="descrip_{$i}" value="{$sample|get_description}"/>
<td><center><input type="checkbox" id="chk_sample_{$i}" value="sample"/></center></td>
{if $analyse_results|@count > 1 }
<td id="sample_{$i}_col_1">{$sample|get_description:$descriptions}</td>
......@@ -77,9 +87,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<td id="sample_{$i}_col_9">{$sample_results["default"].totalMethylatedCinCHH|number_format:0:' ':' '}</td>
<td id="sample_{$i}_col_10">{$sample_results["default"].totalUnmethylatedCinCHH|number_format:0:' ':' '}</td>
<td id="sample_{$i}_col_11">{round(($sample_results["default"].totalMethylatedCinCHH/($sample_results["default"].totalMethylatedCinCHH + $sample_results["default"].totalUnmethylatedCinCHH ))*100,2)}</td>
<td id="sample_{$i}_col_12"><a class="largeimglink" href="{$sample_results["R1"].img}">M-bias</a></td>
<td id="sample_{$i}_col_12"><a class="largeimglink" href="{$sample_results["R1"].img}">M-bias</a></td>
<td id="sample_{$i}_col_13"><a class="largeimglink" href="{$sample_results["R2"].img}">M-bias</a></td>
</tr>
{$i = $i + 1}
{else}
......@@ -141,6 +150,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<th align="left" colspan="{if $analyse_results|@count > 1}14{else}13{/if}">
With selection :
<button type="button" class="btn multiple-selection-btn" id="columns_extract"><i class="icon-picture"></i> Compare</button>
<button type="button" class="btn multiple-selection-btn length-view-btn"><i class="icon-signal"></i> # C analysed</button>
<button type="button" class="btn multiple-selection-btn length-view-btn4"><i class="icon-signal"></i> % C in all context</button>
</th>
</tr>
</tfoot>
......@@ -149,4 +160,4 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{if $numberOfSampleWithoutMappedReads >0 }
<p class="information">Warning, {$numberOfSampleWithoutMappedReads} sample(s) not displayed in the previous table : </b><br /><ul>{$messageToExplainMessagesWithoutMappedReads}</ul>
{/if}
{/block}
\ No newline at end of file
{/block}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment