This demonstates the ability to synchronize pan and zoom behavior across graphs.
To use this, source https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js on your page. See the comments in that file for usage.
<!DOCTYPE html> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph.js"></script> | |
<font size=-1>(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom out.)</font><br/> | |
<table><tr><td> | |
<div id="demodiv"></div> | |
</td><td valign=top> | |
<div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div> | |
</td> | |
</tr></table> | |
<script type="text/javascript"> |
for file in *html ; do | |
echo $file | |
sed -i .bak 's/\.\.\/dygraph-dev.js/http\:\/\/dygraphs.com\/dygraph-combined-dev\.js/' $file | |
sed -i .bak 's/\.\.\/src\/extras/http\:\/\/dygraphs.com\/extras/' $file | |
gist -f index.html $file | sed 's/gist.github.com/bl.ocks.org/' | sed 's/https/http/' | |
done |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Custom Circles</title> | |
<!-- | |
For production (minified) code, use: | |
<script type="text/javascript" src="dygraph-combined.js"></script> | |
--> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
<script type="text/javascript" src="http://dygraphs.com/extras/shapes.js"></script> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Custom Circles</title> | |
<!-- | |
For production (minified) code, use: | |
<script type="text/javascript" src="dygraph-combined.js"></script> | |
--> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
<script type="text/javascript" src="http://dygraphs.com/extras/shapes.js"></script> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Custom Circles</title> | |
<!-- | |
For production (minified) code, use: | |
<script type="text/javascript" src="dygraph-combined.js"></script> | |
--> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
<script type="text/javascript" src="http://dygraphs.com/extras/shapes.js"></script> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
<script type="text/javascript" src="http://dygraphs.com/extras/shapes.js"></script> | |
</head> | |
<style> | |
body { | |
margin-top:40px; | |
} |
This demonstates the ability to synchronize pan and zoom behavior across graphs.
To use this, source https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js on your page. See the comments in that file for usage.
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
<style type='text/css'> | |
body { margin-top: 20px; margin-left: 20px; } | |
.few .dygraph-legend > span.highlight { border: 1px solid grey; } | |
.many .dygraph-legend > span { display: none; } | |
.many .dygraph-legend > span.highlight { display: inline; } |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
</head> | |
<body> | |
<div id="div_g1" style="width:600px; height:300px;"></div> | |
<center> | |
<input id='ylog' type="button" value="y log scale" onclick="setLogScale('y', true)"> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
</head> | |
<body> | |
<div id="div_g1" style="width:600px; height:300px;"></div> | |
<center> | |
<input id='ylog' type="button" value="y log scale" onclick="setLogScale('y', true)"> |