Team:Amsterdam/shadow/modeling/model1
From 2012.igem.org
(Difference between revisions)
Line 6: | Line 6: | ||
charset=iso-8859-1" /> | charset=iso-8859-1" /> | ||
<title>iGEM Amsterdam: Cell Logbook</title> | <title>iGEM Amsterdam: Cell Logbook</title> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
+ | <script type="text/javascript" src="https://dl-web.dropbox.com/get/numeric.js?w=f4425ad6"></script> | ||
+ | <script type="text/javascript"> | ||
+ | function difEqPlot(m){ | ||
+ | f = function(t,x) { | ||
+ | return [m*(x[1]-x[0]), | ||
+ | x[0]*(28-x[2])-x[1], | ||
+ | x[0]*x[1]-(8/3)*x[2]]; | ||
+ | } | ||
+ | sol = numeric.dopri(0,20,[-1,3,4],f,1e-6,2000); | ||
+ | soly = numeric.transpose(sol.y); | ||
+ | |||
+ | $(function () { | ||
+ | var chart; | ||
+ | $(document).ready(function() { | ||
+ | chart = new Highcharts.Chart({ | ||
+ | chart: { | ||
+ | renderTo: 'container', | ||
+ | type: 'line', | ||
+ | marginRight: 130, | ||
+ | marginBottom: 25 | ||
+ | }, | ||
+ | title: { | ||
+ | text: 'Testing Interactive Models', | ||
+ | x: -20 //center | ||
+ | }, | ||
+ | subtitle: { | ||
+ | text: 'Source: iGEM Amsterdam 2012', | ||
+ | x: -20 | ||
+ | }, | ||
+ | xAxis: { | ||
+ | title: { | ||
+ | text: 'x-axis' | ||
+ | }, | ||
+ | }, | ||
+ | yAxis: { | ||
+ | title: { | ||
+ | text: 'y-axis' | ||
+ | }, | ||
+ | plotLines: [{ | ||
+ | value: 0, | ||
+ | width: 1, | ||
+ | color: '#808080' | ||
+ | }] | ||
+ | }, | ||
+ | tooltip: { | ||
+ | formatter: function() { | ||
+ | return '<b>'+ this.series.name +'</b><br/>'+ | ||
+ | this.x +': '+ this.y +'�C'; | ||
+ | } | ||
+ | }, | ||
+ | legend: { | ||
+ | layout: 'vertical', | ||
+ | align: 'right', | ||
+ | verticalAlign: 'top', | ||
+ | x: -10, | ||
+ | y: 100, | ||
+ | borderWidth: 0 | ||
+ | }, | ||
+ | series: [{ | ||
+ | name: 'Differential Equation 1', | ||
+ | data: sol.y | ||
+ | |||
+ | }] | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | } | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | difEqPlot(10) | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | function resubmitDifEqPlot(){ | ||
+ | m = document.myForm.myText.value | ||
+ | difEqPlot(m) | ||
+ | } | ||
+ | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
<div id="centerContent"> | <div id="centerContent"> | ||
<p> | <p> | ||
+ | <form name="myForm"> | ||
+ | Please Enter a number and click the submit button<br> | ||
+ | <input type=TEXT value="10" name="myText"> | ||
+ | <input type=BUTTON value="Submit" name="mySubmit" onClick="resubmitDifEqPlot()"> | ||
+ | </form> | ||
+ | <script src="http://code.highcharts.com/highcharts.js"></script><script src="http://code.highcharts.com/modules/exporting.js"></script> | ||
+ | |||
+ | |||
+ | <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> | ||
</p> | </p> | ||
</div> | </div> |
Revision as of 09:09, 20 June 2012