[dygraphs.git] / tests / y-axis-formatter.html

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
        <title>dygraph</title>
        <!--[if IE]>
        <script type="text/javascript" src="../excanvas.js"></script>
        <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    </head>
    <body>

        <h1>Potential Y Axis formatting problems for small values</h1>

        <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">
            var g1 = new Dygraph(
                document.getElementById("graph1"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    labels: ["X", "Data"]
                }
            );
        </script>

        <p>The solution using a Y axis formatting function:</p>
        <div id="graph2"></div>
        <script type="text/javascript">
            var g2 = new Dygraph(
                document.getElementById("graph2"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    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">
            var g3 = new Dygraph(
                document.getElementById("graph3"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    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>

    </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
84fc6aa7 NN	2	<html>
84fc6aa7 NN	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
84fc6aa7 NN	5	<title>dygraph</title>
84fc6aa7 NN	6	<!--[if IE]>
e1fb3740	7	<script type="text/javascript" src="../excanvas.js"></script>
84fc6aa7	8	<![endif]-->
7e5ddc94 DV	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
84fc6aa7 NN	15	</head>
	16	<body>
	17
	18	<h1>Potential Y Axis formatting problems for small values</h1>
	19
48e614ac DV	20	<p>The problem using default y axis formatting for very small values:<br/>
48e614ac DV	21	(this was more of a problem before dygraphs automatically switched to scientific notation)</p>
84fc6aa7 NN	22	<div id="graph1"></div>
84fc6aa7 NN	23	<script type="text/javascript">
f6fbf9e0	24	var g1 = new Dygraph(
84fc6aa7 NN	25	document.getElementById("graph1"),
	26	[
	27	[1, 0.0],
	28	[2, 0.0001],
	29	[3, 0.0002],
	30	[4, 0.0004],
	31	[5, 0.0005]
	32	],
	33	{
	34	stepPlot: true,
	35	labels: ["X", "Data"]
	36	}
	37	);
	38	</script>
	39
	40	<p>The solution using a Y axis formatting function:</p>
	41	<div id="graph2"></div>
	42	<script type="text/javascript">
f6fbf9e0	43	var g2 = new Dygraph(
84fc6aa7 NN	44	document.getElementById("graph2"),
	45	[
	46	[1, 0.0],
	47	[2, 0.0001],
	48	[3, 0.0002],
	49	[4, 0.0004],
	50	[5, 0.0005]
	51	],
	52	{
	53	stepPlot: true,
48e614ac DV	54	labels: ["X", "Data"],
	55	axes: {
	56	y: {
	57	valueFormatter: function(x) {
	58	var shift = Math.pow(10, 5)
	59	return Math.round(x * shift) / shift
	60	},
	61	}
	62	}
84fc6aa7 NN	63	}
	64	);
	65	</script>
	66
	67	<p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
	68	<div id="graph3"></div>
	69	<script type="text/javascript">
f6fbf9e0	70	var g3 = new Dygraph(
84fc6aa7 NN	71	document.getElementById("graph3"),
	72	[
	73	[1, 0.0],
	74	[2, 0.0001],
	75	[3, 0.0002],
	76	[4, 0.0004],
	77	[5, 0.0005]
	78	],
	79	{
	80	stepPlot: true,
48e614ac DV	81	labels: ["X", "Data"],
	82	axes: {
	83	y: {
	84	valueFormatter: function(x) {
	85	var shift = Math.pow(10, 5)
	86	return "" + Math.round(x shift) / shift
	87	},
	88	axisLabelFormatter: function(x) {
	89	var shift = Math.pow(10, 5)
	90	return "+" + Math.round(x * shift) / shift
	91	}
	92	}
	93	}
84fc6aa7 NN	94	}
	95	);
	96	</script>
	97
	98	</body>
	99	</html>