Team:Amsterdam/shadow/modeling/model1

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.google...")
Line 1: Line 1:
 +
{{Team:Amsterdam/shadow/Stylesheet}}
 +
{{Team:Amsterdam/shadow/Top}}
<html>
<html>
-
<head>
+
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
<meta http-equiv="Content-Type" content="text/html;
-
<title>Highcharts Example</title>
+
charset=iso-8859-1" />
-
 
+
<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>
+
</head>
-
<script type="text/javascript" src="https://dl-web.dropbox.com/get/numeric.js?w=f4425ad6"></script>
+
<body>
-
<script type="text/javascript">
+
<div id="centerContent">
-
function difEqPlot(m){
+
<p>
-
f = function(t,x) {
+
</p>
-
  return [m*(x[1]-x[0]),
+
</div>
-
          x[0]*(28-x[2])-x[1],
+
</body>
-
          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>
+
-
<body>
+
-
<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>
+
-
 
+
-
</body>
+
</html>
</html>
 +
{{Team:Amsterdam/shadow/RightContent}}
 +
{{Team:Amsterdam/shadow/Foot}}

Revision as of 09:07, 20 June 2012

Test page

iGEM Amsterdam: Cell Logbook