theobinfwiki - Dygraphs

Interactive time series using dygraphs:

Dygraphs is a freeware javascript/html5 library, that allows one to make interactive time series plots into your browser. For simple offline use, Firefox works best due to the increased security of Google Chrome, but if you were to display your data online (e.g. as a supplement for your research article), any browser will work. It is fairly easy to make a webpage with all kinds of plots together, allowing you to more efficiently keep track of big datasets or complex simulations. The website (www.dygraphs.com) is very well documented, but here's a little eample anyway:

fitness.csv

Time   NrGenes    Fitness
0      10         0.1
100    20         0.2
200    30         0.3
300    40         0.4
400    50         0.5
500    60         0.6
600    70         0.7
700    71         0.1
800    69         0.2
900    70         0.18
1000   71         0.23
1100   70         0.21
1200   69         0.22

graph.js

/***************************
Javascript Graph Example 1
***************************/
new Dygraph(
    document.getElementById("graph_genes"),
    "fitness.csv",                               // Path to CSV file
    {                                            // Options (see more on dygraphs.com)
      title: 'Genes',
      xlabel: 'Simulation time',
      ylabel: '',
      colors: ['#555555', '#FF5555'],
      visibility: [false,true],
      rollPeriod: 1,
      showRoller: true,
      animatedZooms: true,
      group: "all",
    }
)

graph2.js

/***************************
Javascript Graph Example 2
***************************/
new Dygraph(
    document.getElementById("graph_fitness"),
    "fitness.csv",                                // Path to CSV file
    {                                             // Options (see more on dygraphs.com)
      title: 'Fitness',
      xlabel: 'Simulation time',
      ylabel: '',
      colors: ['#555555', '#FF5555'],
      visibility: [true,false],
      rollPeriod: 1,
      showRoller: true,
      animatedZooms: true,
      group: "all",
    }
)

webpage.html

<html>
<head>
<title> Your graph page </title>
 
<!-- Downloaded JS library from dygraphs.com, included here -->
<script type="text/javascript" src="dygraph-combined.js"></script>
 
</head>
 
<body>
 
<!-- Placeholder for graphs, id should correspond to id given graph.js -->
<div id="graph_fitness" style="width:500px; height:300px;"></div>
<div id="graph_genes" style="width:500px; height:300px;"></div>
 
<!-- Include the graph scripts, which inserts the graphs into the placeholders -->
<script type="text/javascript" src="graph.js"></script>
<script type="text/javascript" src="graph2.js"></script>
 
</body>
</html>

Now, all you have to do is open webpage.html with your browser (Firefox preferably), and see if it works. Although its a bit of work to set this up for the first time, all following plots will just be a matter of copy/pasting the files.

Happy scripting!