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

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