dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
115 lines (103 loc) • 3.59 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>multi-scale</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>
<style type="text/css">
body {
line-height: 150%;
}
</style>
</head>
<body style="max-width: 700px;">
<p>Gridlines and axis labels make charts easier to understand. They give
the lines a clear scale. Unless you tell it otherwise, dygraphs will choose
a y-axis and set of gridlines which include all of your data.</p>
<p>If you have many series with different scales, this will compress the
variation in all but the largest one. Standard ways to deal with this
include <a href="two-axes.html">secondary y-axes</a> and <a
href="logscale.html">log scales</a>.</p>
<p>If neither of these is to your liking, you can manually rescale your
series and undo that scaling for the hover values. This demo shows how to
do it.</p>
<div id="demodiv"></div>
<p>Hover over to see the original values. This is what the data looks
like without any rescaling:</p>
<div id="reference_div"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() {
var zp = function(x) { if (x < 10) return "0"+x; else return x; };
var labels = ["date","parabola","line","another line","sine wave"];
var data = [];
for (var i=1; i<=31; i++) {
var row = [];
row.push(new Date("2006/10/" + zp(i)));
row.push(10*(i*(31-i)));
row.push(100*(8*i));
row.push(1000*(250 - 8*i));
row.push(10000*(125 + 125 * Math.sin(0.3*i)));
data.push(row);
}
var scales = {
"parabola": 1,
"line": 10,
"another line": 100,
"sine wave": 1000
};
var rescaled_data = [];
for (var i = 0; i < data.length; i++) {
var src = data[i];
var row = [];
row.push(src[0]);
for (var j = 1; j < src.length; j++) {
row.push(src[j] / scales[labels[j]]);
}
rescaled_data.push(row);
}
g = new Dygraph(
document.getElementById("demodiv"),
rescaled_data,
{
legend: 'always',
labels: labels,
width: 640,
height: 480,
title: 'Four series on different scales',
xlabel: 'Date',
ylabel: 'Count',
axes : {
y : {
valueFormatter: function(y, opts, series_name) {
var unscaled = y * scales[series_name];
if (series_name == 'sine wave') return unscaled.toPrecision(4);
return unscaled;
}
}
}
}
);
g_orig = new Dygraph(
document.getElementById("reference_div"),
data,
{
legend: 'always',
labels: labels,
width: 640,
height: 480,
title: 'Four series on the same scale',
xlabel: 'Date',
ylabel: 'Count',
axes: {
y: {
axisLabelWidth: 80
}
}
}
);
});
//--><!]]></script>
</body>
</html>