Difference between revisions of "Template:CLSB-UK Results Fluorescence-miRNA"

Revision as of 17:34, 1 November 2017 (view source)

Revision as of 17:36, 1 November 2017 (view source)

Line 1:

<html><script type="text/javascript" src="https://2017.igem.org/wiki/index.php?title=Template:CLSB-UK%20Chart.js&action=raw&ctype=text/javascript"></script><div style="width: 100%; margin: 0 auto"><canvas id="fluorescenceMiRNA_chart"></canvas></div><script>Chart.defaults.global.defaultFontFamily = 'Montserrat, sans-serif';

−

; function generatePointsFromData(a){return[{x:9e-14,y:a[0]},{x:9e-13,y:a[1]},{x:9e-12,y:a[2]},{x:9e-11,y:a[3]},{x:9e-10,y:a[4]},{x:9e-9,y:a[5]},{x:9e-8,y:a[6]},{x:9e-7,y:a[7]}]}var data={6000:generatePointsFromData([135,147,173.67,133.67,111.67,137.67,783.5,1399.33]),12000:generatePointsFromData([255.67,299.33,305.67,256,146.33,262.67,2032.5,3720.67]),18000:generatePointsFromData([332.33,328.33,338.67,337,184,348,3177,5182]),24000:generatePointsFromData([352,339,342.67,359.33,197.33,371.67,3842,5918]),30000:generatePointsFromData([348.33,337.67,343.67,361,200.33,372.67,4242.5,6116]),36000:generatePointsFromData([328,319.67,323.33,343.67,194,347.67,4329,5892])},config={type:'line',data:{datasets:[{radius: 5,pointRadius: 5, pointHoverRadius: 25, label:'Fluorescence (au)',backgroundColor:'#5b9bd5',borderColor:'#5b9bd5',fill:!1,data:data[18000]}]},options:{elements:{line:{tension:0}},legend:{display:false},responsive:true,title:{display:true,text:'Fluorescence against miRNA concentration at 18,000 seconds',fontColor:'#000',fontSize:20},scales:{xAxes:[{type:'logarithmic',display:true,ticks:{maxRotation: 0},scaleLabel:{display:true,labelString:'15b-5p miRNA concentration / M'}}],yAxes:[{display:true,scaleLabel:{display:true,labelString:'Fluorescence / arbitrary units'},ticks:{min: 0, max: 7000}}]}}};var fmirna_chart=new Chart(document.getElementById('fluorescenceMiRNA_chart').getContext('2d'),config);function setFluorescenceMiRNATime(a){config.data.datasets[0].data=data[a];config.options.title.text='Fluorescence against miRNA concentration at '+a.toLocaleString()+' seconds';fmirna_chart.update()}</script><style>#fluorescenceMiRNA_chart_buttons {display: inline;margin: 0;}#fluorescenceMiRNA_chart_buttons li {display: inline-block;}#fluorescenceMiRNA_chart_buttons li button { border-radius: 6px; background: #eceff1; outline: 0; cursor: pointer; border: 2px solid #eceff1; transition: border-color .15s ease-in-out; padding: 4px; font-size: 14px; padding: 10px}#fluorescenceMiRNA_chart_buttons li button:hover { border-color: #52c7b8;}</style><br><div style="text-align: center;"><p style="display: inline">Set time to: </p><ul id="fluorescenceMiRNA_chart_buttons"><li><button onclick="setFluorescenceMiRNATime(6000); return false">6,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(12000); return false">12,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(18000); return false">18,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(24000); return false">24,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(30000); return false">30,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(36000); return false">36,000s</button></li></ul></div></html>

+

; function generatePointsFromData(a){return[{x:9e-14,y:a[0]},{x:9e-13,y:a[1]},{x:9e-12,y:a[2]},{x:9e-11,y:a[3]},{x:9e-10,y:a[4]},{x:9e-9,y:a[5]},{x:9e-8,y:a[6]},{x:9e-7,y:a[7]}]}var data={6000:generatePointsFromData([135,147,173.67,133.67,111.67,137.67,783.5,1399.33]),12000:generatePointsFromData([255.67,299.33,305.67,256,146.33,262.67,2032.5,3720.67]),18000:generatePointsFromData([332.33,328.33,338.67,337,184,348,3177,5182]),24000:generatePointsFromData([352,339,342.67,359.33,197.33,371.67,3842,5918]),30000:generatePointsFromData([348.33,337.67,343.67,361,200.33,372.67,4242.5,6116]),36000:generatePointsFromData([328,319.67,323.33,343.67,194,347.67,4329,5892])},config={type:'line',data:{datasets:[{radius: 5,pointRadius: 5, pointHoverRadius: 5, pointHitDetectionRadius: 25, label:'Fluorescence (au)',backgroundColor:'#5b9bd5',borderColor:'#5b9bd5',fill:!1,data:data[18000]}]},options:{elements:{line:{tension:0}},legend:{display:false},responsive:true,title:{display:true,text:'Fluorescence against miRNA concentration at 18,000 seconds',fontColor:'#000',fontSize:20},scales:{xAxes:[{type:'logarithmic',display:true,ticks:{maxRotation: 0},scaleLabel:{display:true,labelString:'15b-5p miRNA concentration / M'}}],yAxes:[{display:true,scaleLabel:{display:true,labelString:'Fluorescence / arbitrary units'},ticks:{min: 0, max: 7000}}]}}};var fmirna_chart=new Chart(document.getElementById('fluorescenceMiRNA_chart').getContext('2d'),config);function setFluorescenceMiRNATime(a){config.data.datasets[0].data=data[a];config.options.title.text='Fluorescence against miRNA concentration at '+a.toLocaleString()+' seconds';fmirna_chart.update()}</script><style>#fluorescenceMiRNA_chart_buttons {display: inline;margin: 0;}#fluorescenceMiRNA_chart_buttons li {display: inline-block;}#fluorescenceMiRNA_chart_buttons li button { border-radius: 6px; background: #eceff1; outline: 0; cursor: pointer; border: 2px solid #eceff1; transition: border-color .15s ease-in-out; padding: 4px; font-size: 14px; padding: 10px}#fluorescenceMiRNA_chart_buttons li button:hover { border-color: #52c7b8;}</style><br><div style="text-align: center;"><p style="display: inline">Set time to: </p><ul id="fluorescenceMiRNA_chart_buttons"><li><button onclick="setFluorescenceMiRNATime(6000); return false">6,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(12000); return false">12,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(18000); return false">18,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(24000); return false">24,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(30000); return false">30,000s</button></li> <li><button onclick="setFluorescenceMiRNATime(36000); return false">36,000s</button></li></ul></div></html>