[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]-->
        <script type="text/javascript" src="../strftime/strftime-min.js"></script>
        <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
        <script type="text/javascript" src="../dygraph-canvas.js"></script>
        <script type="text/javascript" src="../dygraph.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:</p>
        <div id="graph1"></div>
        <script type="text/javascript">
            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">
            new Dygraph(
                document.getElementById("graph2"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    yValueFormatter: function(x) {
                        var shift = Math.pow(10, 5)
                        return Math.round(x * shift) / shift
                    },
                    labels: ["X", "Data"]
                }
            );
        </script>

        <p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
        <div id="graph3"></div>
        <script type="text/javascript">
            new Dygraph(
                document.getElementById("graph3"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    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"]
                }
            );
        </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 NN	8	<![endif]-->
	9	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	10	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	11	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	12	<script type="text/javascript" src="../dygraph.js"></script>
	13	</head>
	14	<body>
	15
	16	<h1>Potential Y Axis formatting problems for small values</h1>
	17
	18	<p>The problem using default y axis formatting for very small values:</p>
	19	<div id="graph1"></div>
	20	<script type="text/javascript">
	21	new Dygraph(
	22	document.getElementById("graph1"),
	23	[
	24	[1, 0.0],
	25	[2, 0.0001],
	26	[3, 0.0002],
	27	[4, 0.0004],
	28	[5, 0.0005]
	29	],
	30	{
	31	stepPlot: true,
	32	labels: ["X", "Data"]
	33	}
	34	);
	35	</script>
	36
	37	<p>The solution using a Y axis formatting function:</p>
	38	<div id="graph2"></div>
	39	<script type="text/javascript">
	40	new Dygraph(
	41	document.getElementById("graph2"),
	42	[
	43	[1, 0.0],
	44	[2, 0.0001],
	45	[3, 0.0002],
	46	[4, 0.0004],
	47	[5, 0.0005]
	48	],
	49	{
	50	stepPlot: true,
	51	yValueFormatter: function(x) {
	52	var shift = Math.pow(10, 5)
	53	return Math.round(x * shift) / shift
	54	},
	55	labels: ["X", "Data"]
	56	}
	57	);
	58	</script>
	59
	60	<p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
	61	<div id="graph3"></div>
	62	<script type="text/javascript">
	63	new Dygraph(
	64	document.getElementById("graph3"),
	65	[
	66	[1, 0.0],
	67	[2, 0.0001],
	68	[3, 0.0002],
	69	[4, 0.0004],
	70	[5, 0.0005]
	71	],
72	{
73	stepPlot: true,
74	yValueFormatter: function(x) {
75	var shift = Math.pow(10, 5)
76	return "" + Math.round(x shift) / shift
77	},
78	yAxisLabelFormatter: function(x) {
79	var shift = Math.pow(10, 5)
80	return "+" + Math.round(x * shift) / shift
81	},
82	labels: ["X", "Data"]
83	}
84	);
85	</script>
86
87	</body>
88	</html>