<p>When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.</p>
+<p>You should seriously consider stopping here! Older versions of IE have a small market share that's decreasing by the day. Major web sites, like the <a href="http://www.nytimes.com/">New York Times</a>, have already dropped support for IE8. Future versions of dygraphs will do the same. But if you insist…</p>
+
<p>If you want to support previous versions of Internet Explorer (IE6–IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code><canvas></code> tag using VML. You can add excanvas by including the following snippet:</p>
<pre>
...,
{
strokeWidth: 5, // default stroke width
- 'Y1': {
- strokeWidth: 3 // Y1 gets a special value.
- },
- 'Y3': {
- strokeWidth: 1 // so does Y3.
+ series: {
+ Y1: {
+ strokeWidth: 3 // Y1 gets a special value.
+ },
+ Y3: {
+ strokeWidth: 1 // so does Y3.
+ }
}
});
</pre>
/* When you visit dygraphs.com/options.html#errorBars, the fixed top nav
* obscures the top 100px of content for that anchor. This is a workaround.
- * See http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors
+ * See http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
*/
a[name] {
- padding-top: 100px; /* matches body { padding-top } */
- margin-top: -100px; /* matches body { padding-top } */
- display: inline-block; /* required for webkit browsers */
+ display: block;
+ position: relative;
+ top: -100px;
+ visibility: hidden;
}
@media screen and (min-width: 768px) and (max-width: 992px) {
a[name] {
- padding-top: 130px; /* matches body { padding-top } */
- margin-top: -130px; /* matches body { padding-top } */
- display: inline-block; /* required for webkit browsers */
+ top: -130px;
}
}
+a.link {
+ visibility: hidden;
+ text-decoration: none;
+ color: #777;
+}
+.option:hover a.link {
+ visibility: visible;
+}
}
</style>
-<p>To use dygraphs, include the <code><a href="download.html">dygraph-combined.js</a></code> JavaScript file and instantiate a <code>Dygraph</code> object.</p>
+<p>To use dygraphs, include the <code><a href="download.html">dygraph-combined-dev.js</a></code> JavaScript file and instantiate a <code>Dygraph</code> object.</p>
<p>Here's a basic example to get things started:</p>
<html>
<head>
<script type="text/javascript"
- src="dygraph-combined.js"></script>
+ src="dygraph-combined-dev.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<html>
<head>
<script type="text/javascript"
- src="dygraph-combined.js"></script>
+ src="dygraph-combined-dev.js"></script>
</head>
<body>
<div id="graphdiv2"
<html>
<head>
<script type="text/javascript"
- src="dygraph-combined.js"></script>
+ src="dygraph-combined-dev.js"></script>
</head>
<body>
<div id="graphdiv3"
<![endif]-->
<script src="../dygraph-dev.js"></script>
+ <script src="../extras/synchronizer.js"></script>
+
<script src="lib/jquery-1.4.2.js"></script>
<script src="../common/textarea.js"></script>
<script src="gallery.js"></script>
title: 'Multiple graphs in sync',
setup: function(parent) {
parent.innerHTML = [
- "<p>Zooming and panning on any of the charts will zoom and pan all the",
- "others.</p>",
- "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>",
- "<table><tr>",
- "<td><div id='div1' style='width:500px; height:300px;'></div></td>",
- "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>",
- "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>",
- "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>"].join("\n");
+ '<style>',
+ ' .chart { width: 500px; height: 300px; }',
+ ' .chart-container { overflow: hidden; }',
+ ' #div1 { float: left; }',
+ ' #div2 { float: left; }',
+ ' #div3 { float: left; clear: left; }',
+ ' #div4 { float: left; }',
+ '</style>',
+ '<p>Zooming and panning on any of the charts will zoom and pan all the',
+ 'others. Selecting points on one will select points on the others.</p>',
+ '<p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page.',
+ 'See the comments in that file for usage.</p>',
+ '<div class="chart-container">',
+ ' <div id="div1" class="chart"></div>',
+ ' <div id="div2" class="chart"></div>',
+ ' <div id="div3" class="chart"></div>',
+ ' <div id="div4" class="chart"></div>',
+ '</div>',
+ '<p>',
+ ' Synchronize what?',
+ ' <input type=checkbox id="chk-zoom" checked><label for="chk-zoom"> Zoom</label>',
+ ' <input type=checkbox id="chk-selection" checked><label for="chk-selection"> Selection</label>',
+ '</p>'
+ ].join("\n");
},
run: function() {
var gs = [];
NoisyData, {
rollPeriod: 7,
errorBars: true,
- drawCallback: function(me, initial) {
- if (blockRedraw || initial) return;
- blockRedraw = true;
- var range = me.xAxisRange();
- var yrange = me.yAxisRange();
- for (var j = 0; j < 4; j++) {
- if (gs[j] == me) continue;
- gs[j].updateOptions( {
- dateWindow: range,
- valueRange: yrange
- } );
- }
- blockRedraw = false;
- }
}
)
);
}
+ var sync = Dygraph.synchronize(gs);
+
+ function update() {
+ var zoom = document.getElementById('chk-zoom').checked;
+ var selection = document.getElementById('chk-selection').checked;
+ sync.detach();
+ sync = Dygraph.synchronize(gs, {
+ zoom: zoom,
+ selection: selection
+ });
+ }
+ $('#chk-zoom, #chk-selection').change(update);
}
});
for label in sorted(labels):
- print '<a name="%s"><h3>%s</h3>\n' % (label, label)
+ print '<a name="%s"></a><h3>%s</h3>\n' % (label, label)
for opt_name in sorted(docs.keys()):
opt = docs[opt_name]
if not opt['description']: opt['description'] = '(missing)'
print """
- <div class='option'><a name="%(name)s"></a><b>%(name)s</b><br/>
+ <div class='option'><a name="%(name)s"></a><b>%(name)s</b>
+ <a class="link" href="#%(name)s">#</a>
+ <br/>
<p>%(desc)s</p>
<i>Type: %(type)s</i><br/>%(parameters)s
<i>Default: %(default)s</i></p>
<script type="text/javascript" src="../extras/synchronizer.js"></script>
<script type="text/javascript" src="data.js"></script>
- <style type="text/css">
+ <style>
.chart { width: 500px; height: 300px; }
.chart-container { overflow: hidden; }
#div1 { float: left; }
projects / dygraphs.git / commitdiff