dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
69 lines (63 loc) • 2.56 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Old y-axis range behavior</title>
<link rel="stylesheet" type="text/css" href="../dist/dygraph.css" />
<link rel="stylesheet" type="text/css" href="../common/vextlnk.css" />
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<h2>Old y-axis range behavior</h2>
<p>In dygraphs 1.x, if you set a <code>valueRange</code> for the y-axis, zoomed in and then double-clicked to zoom out, then the chart would zoom out to the <code>valueRange</code> that you specified.</p>
<p>Starting with dygraphs 2, double-clicking will zoom out to the full range of the chart's data. This makes the x- and y-axes behave identically.</p>
<p>This demo shows you how to get the old behavior in dygraphs 2 using a plugin. View source to see how.</p>
<div id="demodiv" style="width: 800px; height: 300px;"></div>
<div id="demodiv2" style="width: 800px; height: 300px;"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() {
const doubleClickZoomOutPlugin = {
activate: function(g) {
// Save the initial y-axis range for later.
const initialValueRange = g.getOption('valueRange');
return {
dblclick: e => {
e.dygraph.updateOptions({
dateWindow: null, // zoom all the way out
valueRange: initialValueRange // zoom to a specific y-axis range.
});
e.preventDefault(); // prevent the default zoom out action.
}
}
}
}
var gCustom = new Dygraph(
document.getElementById("demodiv"),
NoisyData,
{
legend: 'always',
title: 'Custom y-axis range on zoom out',
errorBars: true,
valueRange: [2, 6],
plugins: [
doubleClickZoomOutPlugin
],
animatedZooms: true
}
);
var gDefault = new Dygraph(
document.getElementById("demodiv2"),
NoisyData,
{
legend: 'always',
title: 'Default y-axis range on zoom out',
errorBars: true,
valueRange: [2, 6],
animatedZooms: true
}
);
});
//--><!]]></script>
</body>
</html>