Team:Amsterdam/maarten/linechart

From 2012.igem.org

(Difference between revisions)
(Undo revision 14910 by MaartenR (talk))
Line 5: Line 5:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-
<script type="text/javascript">
+
<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 () {
$(function () {
     var chart;
     var chart;
Line 17: Line 26:
             },
             },
             title: {
             title: {
-
                 text: 'Monthly Average Temperature',
+
                 text: 'Testing Interactive Models',
                 x: -20 //center
                 x: -20 //center
             },
             },
             subtitle: {
             subtitle: {
-
                 text: 'Source: WorldClimate.com',
+
                 text: 'Source: iGEM Amsterdam 2012',
                 x: -20
                 x: -20
             },
             },
             xAxis: {
             xAxis: {
-
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+
                 title: {
-
                     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
                     text: 'x-axis'
 +
                },
             },
             },
             yAxis: {
             yAxis: {
                 title: {
                 title: {
-
                     text: 'Temperature (°C)'
+
                     text: 'y-axis'
                 },
                 },
                 plotLines: [{
                 plotLines: [{
Line 41: Line 51:
                 formatter: function() {
                 formatter: function() {
                         return '<b>'+ this.series.name +'</b><br/>'+
                         return '<b>'+ this.series.name +'</b><br/>'+
-
                         this.x +': '+ this.y +'°C';
+
                         this.x +': '+ this.y +'�C';
                 }
                 }
             },
             },
Line 53: Line 63:
             },
             },
             series: [{
             series: [{
-
                 name: 'Tokyo',
+
                 name: 'Differential Equation 1',
-
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+
                 data: sol.y
-
            }, {
+
 
-
                name: 'New York',
+
-
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
+
-
            }, {
+
-
                name: 'Berlin',
+
-
                 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
+
-
            }, {
+
-
                name: 'London',
+
-
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+
             }]
             }]
         });
         });
Line 69: Line 71:
      
      
});
});
-
</script>
+
}
 +
</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>
 +
<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/highcharts.js"></script>
         <script src="http://code.highcharts.com/modules/exporting.js"></script>
         <script src="http://code.highcharts.com/modules/exporting.js"></script>

Revision as of 19:20, 19 June 2012

Highcharts Example

Please Enter a number and click the submit button

Retrieved from "http://2012.igem.org/Team:Amsterdam/maarten/linechart"