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" src="numeric.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 27: Line 17:
             },
             },
             title: {
             title: {
-
                 text: 'Testing Interactive Models',
+
                 text: 'Monthly Average Temperature',
                 x: -20 //center
                 x: -20 //center
             },
             },
             subtitle: {
             subtitle: {
-
                 text: 'Source: iGEM Amsterdam 2012',
+
                 text: 'Source: WorldClimate.com',
                 x: -20
                 x: -20
             },
             },
             xAxis: {
             xAxis: {
-
                 title: {
+
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-
                     text: 'x-axis'
+
                     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
                },
+
             },
             },
             yAxis: {
             yAxis: {
                 title: {
                 title: {
-
                     text: 'y-axis'
+
                     text: 'Temperature (°C)'
                 },
                 },
                 plotLines: [{
                 plotLines: [{
Line 52: Line 41:
                 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 64: Line 53:
             },
             },
             series: [{
             series: [{
-
                 name: 'Differential Equation 1',
+
                 name: 'Tokyo',
-
                 data: sol.y
+
                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]
-
 
+
            }, {
 +
                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 72: Line 69:
      
      
});
});
-
}
+
</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">
+
        <script src="http://code.highcharts.com/highcharts.js"></script>
-
    Please Enter a number and click the submit button<br>
+
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
-
      <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>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Revision as of 19:18, 19 June 2012

Highcharts Example

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