<h1>Potential Y Axis formatting problems for small values</h1>
- <p>The problem using default y axis formatting for very small values:</p>
+ <p>The problem using default y axis formatting for very small values:<br/>
+ (this was more of a problem before dygraphs automatically switched to scientific notation)</p>
<div id="graph1"></div>
<script type="text/javascript">
- new Dygraph(
+ var g1 = new Dygraph(
document.getElementById("graph1"),
[
[1, 0.0],
<p>The solution using a Y axis formatting function:</p>
<div id="graph2"></div>
<script type="text/javascript">
- new Dygraph(
+ var g2 = new Dygraph(
document.getElementById("graph2"),
[
[1, 0.0],
],
{
stepPlot: true,
- yValueFormatter: function(x) {
- var shift = Math.pow(10, 5)
- return Math.round(x * shift) / shift
- },
- labels: ["X", "Data"]
+ labels: ["X", "Data"],
+ axes: {
+ y: {
+ valueFormatter: function(x) {
+ var shift = Math.pow(10, 5)
+ return Math.round(x * shift) / shift
+ },
+ }
+ }
}
);
</script>
<p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
<div id="graph3"></div>
<script type="text/javascript">
- new Dygraph(
+ var g3 = new Dygraph(
document.getElementById("graph3"),
[
[1, 0.0],
],
{
stepPlot: true,
- yValueFormatter: function(x) {
- var shift = Math.pow(10, 5)
- return "*" + Math.round(x * shift) / shift
- },
- yAxisLabelFormatter: function(x) {
- var shift = Math.pow(10, 5)
- return "+" + Math.round(x * shift) / shift
- },
- labels: ["X", "Data"]
+ labels: ["X", "Data"],
+ axes: {
+ y: {
+ valueFormatter: function(x) {
+ var shift = Math.pow(10, 5)
+ return "*" + Math.round(x * shift) / shift
+ },
+ axisLabelFormatter: function(x) {
+ var shift = Math.pow(10, 5)
+ return "+" + Math.round(x * shift) / shift
+ }
+ }
+ }
}
);
</script>