|
|
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}} |